SleekDigital (gravatar)

Cross-Browser Css Centering

I finally found an almost acceptible approach to centering content (vertical and horizontal) with CSS, cross browser, without knowing the dimensions of the element that needs centered.

The approach in the above link works for vertical centering (the hard part).  Combine that with your preferred horizonal centering method and you're all set.  One option for the IE only part is to set the left position the same way the top position is set, 50% for the middle element, and -50% for the inner.  And maybe use text-align:center for the other browsers.  Also, I prefer to not use the "#" hack to make other browsers ignore the IE specific stuff.  Instead, i'll conditionally include seperate CSS files.

It seems a bit odd that the +- 50% position settings work, but they do.  I can't wait for they day when we don't have to resort to such nonsense, not that the table display stuff for other browsers is any better.

 

1 Comment

Your Information
Mrs. Gravatar (gravatar)

<-- It's a gravatar

your comment
Flash Player required