advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

Jazzerus on 03/17/08


Tagged

internet explorer vertical-align


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

SpinZ
visuallyspun
vince2doom


Vertical-Align for Stubborn Browsers

Published in: CSS 

The statements beginning with a pound (#) are only read by Internet Explorer. All other lines ignore these statements. For some layouts you may need to set the container's position to absolute for all browsers -- simply remove the pound and change the value appropriately. If you want to horizontally align the inner div add text-align:center to either the container or the hackouter blocks.


Plain TextExpand 
  1. #container{
  2.     display: table;
  3.     #position: relative;
  4.     overflow: hidden;
  5. }
  6. #hackouter {
  7.     #position: absolute;
  8.     #top: 50%;
  9.     display: table-cell;
  10.     vertical-align: middle;
  11. }
  12. #hackinner {
  13.     #position: relative;
  14.     #top: -50%;
  15. }

Report this snippet 

You need to login to post a comment.