Vertical align text in floating div using css

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

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>
  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;}
  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


RSS Icon Subscribe to comments

You need to login to post a comment.