Posted By

webdevelopertut on 07/09/09


Tagged

div css float text align vertical


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

myrebel420
marcocs
silentbob84
pogoretski
jamiedollard
scilec


Vertical align text in floating div using css


 / Published in: CSS
 

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

  1. HTML:
  2. <div class="contentdiv">
  3. <p>It works! Vertically Center Align!</p>
  4. </div>
  5.  
  6. CSS:
  7. .contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
  8. .contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}
  9.  
  10. Hack for ie:
  11. .contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

Report this snippet  

You need to login to post a comment.