Vertical Centering With CSS Tables And Vertical-Align

Trang chủ » Html Td Align Vertical Center » Vertical Centering With CSS Tables And Vertical-Align

Có thể bạn quan tâm

  • Back to Post
  • Line Height
  • CSS Tables
  • Positioning and Margins
  • Positioning and Stretch
  • Padding
  • Floater Div
Table cell and vertical align html: <div id="parent"> <div id="child">Content here</div> </div> css: #parent {display: table} #child { display: table-cell; vertical-align: middle; } IE Fix: child {display: inline-block}

Since the vertical-align property works with table cells we set the parent div to be a css table and we set the child div as a table cell. We can then safely use vertical-align: middle to vertically center the contents of the child div.

This method works with multiple lines of text and the container div will grow dynamically with the content. Unfortunately it doesn't work with IE6 or IE7 without a fix.

Note: Additional styles not related to the above have been used to make this demo more presentable.

Từ khóa » Html Td Align Vertical Center