Advanced Search

Vertical align text in floating div using css

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your 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");}

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.