Can't center text vertically in Div

[liunx]

I have text in a Div layer and was able to center it horizontally, but not vertically. This
<!-- m --><a class="postlink" href="http://www.domedia.org/oveklykken/css-vertical-align.php">http://www.domedia.org/oveklykken/css-v ... -align.php</a><!-- m -->
explains that I need to have the text in a <td> for the
vertical-align: middle;
to work.


.TextBox {
font-family: Verdana, sans-serif;
color: #999999;
font-size: 6pt;
font-weight: bold;
letter-spacing: 0px;
text-decoration: none;
text-align: center;
}



<div id="Layer1" style="position:absolute; left:8px; top:394px; width:159px; height:27px; z-index:6; background-color: #E5EDF4">
<a class="TextBox">Test</a></div>

Is there a way to have the text centered in the middle vertically and horizontally, without putting it in a <td>?

Thanks.

-jmsHi there jamesx521,

you can center a single line of text vertically
by using line-height set to the height of
the container, like this...
<style type="text/css">
<!--

#Layer1 {
position:absolute;
left:8px;
top:394px;
z-index:6;
background-color: #e5edf4;
}

.TextBox {
font-family: Verdana, sans-serif;
color: #999;
font-size: 6pt;
font-weight: bold;
letter-spacing: 0px;
text-decoration: none;
text-align: center;
line-height:27px;
display:block;
width:159px;
height:27px;
}

//-->
</style>


<div id="Layer1">
<a class="TextBox">Test</a>
</div>

cootheadBlocks can be vertically centered using negative margins:
<!-- m --><a class="postlink" href="http://www.hicksdesign.co.uk/journal/30/vertical-centering-with-css">http://www.hicksdesign.co.uk/journal/30 ... g-with-css</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">http://www.wpdfd.com/editorial/thebox/deadcentre4.html</a><!-- m -->