Hi,
Can someone please explain to me how to use the verticle-align.
When i use it in a div or span is doesn't align anything to it i.e
#1 {
verticle-align:middle;
height:50px;
}
<div id="1">
Hello
</div>
or
#2 {
verticle-align:middle;
height:50px;
}
<div id="2">
<span>Hello</span>
</div>
<span id="2">
Hello
</span>
It doesn't seam to align anything?
Any help ???
Thanks
AdamFirst off, you've spelt 'vertical-align' wrong. Not a good start. There's no spell-checker built into browsers to fix your code for you - everything has to be correct.
Secondly, you can't name an id with a number - it has to start with a letter. '1' is no good. Try 'a' or 'one' or 'a1' instead.
Thirdly, your question...
'vertical-align' only works on inline elements. 'div' is a block-level element, so vertical-align won't do anything. Did you read the W3C specs (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">http://www.w3.org/TR/CSS21/visudet.html ... ical-align</a><!-- m -->)? It's the best place to go to find out exactly what things do and don't do.
I hope this helps.Vertical-align aligns the affected element within a line-type element, not within a block element like a div.
Here's a different way to get a line of text centered in a box:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
p.box {
line-height: 3em;
width: 10em;
margin: 0.5em auto;
padding: 1em;
text-align: center;
border: solid 1px black;
background-color: aqua;
color: navy;
font-weight: bold;
}
-->
</style>
</head>
<body>
<p class=box>This is a test.</p>
</body>
</html>
Can someone please explain to me how to use the verticle-align.
When i use it in a div or span is doesn't align anything to it i.e
#1 {
verticle-align:middle;
height:50px;
}
<div id="1">
Hello
</div>
or
#2 {
verticle-align:middle;
height:50px;
}
<div id="2">
<span>Hello</span>
</div>
<span id="2">
Hello
</span>
It doesn't seam to align anything?
Any help ???
Thanks
AdamFirst off, you've spelt 'vertical-align' wrong. Not a good start. There's no spell-checker built into browsers to fix your code for you - everything has to be correct.
Secondly, you can't name an id with a number - it has to start with a letter. '1' is no good. Try 'a' or 'one' or 'a1' instead.
Thirdly, your question...
'vertical-align' only works on inline elements. 'div' is a block-level element, so vertical-align won't do anything. Did you read the W3C specs (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">http://www.w3.org/TR/CSS21/visudet.html ... ical-align</a><!-- m -->)? It's the best place to go to find out exactly what things do and don't do.
I hope this helps.Vertical-align aligns the affected element within a line-type element, not within a block element like a div.
Here's a different way to get a line of text centered in a box:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
p.box {
line-height: 3em;
width: 10em;
margin: 0.5em auto;
padding: 1em;
text-align: center;
border: solid 1px black;
background-color: aqua;
color: navy;
font-weight: bold;
}
-->
</style>
</head>
<body>
<p class=box>This is a test.</p>
</body>
</html>