Return to Snippet

Revision: 15546
at July 9, 2009 13:00 by webdevelopertut


Initial Code
HTML:
<div class="contentdiv">
<p>It works! Vertically Center Align!</p>
</div>

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

Initial URL
http://htmlcsstutorials.blogspot.com/2009/07/vertical-align-text-in-floating-div.html

Initial Description


Initial Title
Vertical align text in floating div using css

Initial Tags
css, text

Initial Language
CSS