CSS Vertical Alignment Question
If I have the following code, how come the displayed text is not vertically aligned in the space provided?
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<Style>
.quote
{
position : absolute;
COLOR: #ac2b31;
FONT-FAMILY: "Bauhaus 93", Arial, Helvetica, Verdana, sans-serif;
FONT-SIZE: 12pt;
height: 150px;
border: solid 2px;
vertical-align: middle;
}
</STYLE>
</head>
<body>
<div class="quote">"aaaaaa bbbbb cccccaaaaaa bbbbb ccccc
aaaaaa bbbbb cccccaaaaaa bbbbb cccccaaaaaa bbbbb ccccc aaaaaa bbbbb ccccc
aaaaaa bbbbb cccccaaaaaa bbbbb cccccaaaaaa bbbbb ccccc"</font>
</div>
</body>
</html>
Re: CSS Vertical Alignment Question
Text is never vertically aligned, the only things you can use the vertical-align property on are images and table cell contents. So what you can do is make a child <div> for the text contents, set the outer div to display as a table, inner div to display as a table cell, and then you can use vertical-align. Since this is CSS 2 stuff that isn't supported in IE there is also a few hacks that only work in IE, so it should work in all browsers. Note it requires JS in IE (I'm trying to work out an alternative that does not).
Also, I fixed up your html and CSS code a bit, remember all CSS is lower case, and your HTML should be too for maximum compatibility ;)
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.quote
{
position : absolute;
color: #ac2b31;
font: 12pt "Bauhaus 93", Arial, Helvetica, Verdana, sans-serif;
height: 150px;
border: 2px solid black;
display: table;
width: 100%;
}
.quote div
{
display: table-cell;
vertical-align: middle;
/* for IE's eyes only: */
_position: absolute;
_top: expression(this.parentNode.offsetHeight / 2 - this.offsetHeight / 2);
}
</style>
</head>
<body>
<div class="quote">
<div>
"aaaaaa bbbbb cccccaaaaaa bbbbb ccccc
aaaaaa bbbbb cccccaaaaaa bbbbb cccccaaaaaa bbbbb ccccc aaaaaa bbbbb ccccc
aaaaaa bbbbb cccccaaaaaa bbbbb cccccaaaaaa bbbbb ccccc"
</div>
</div>
</body>
</html>
