A couple of months ago I wrote an article titled "How to horizontally center anything with CSS". The featured method of the article was to center an element with a dynamic width using display: table
. This works wonderfully in IE8+ and modern browsers. I would usually ignore IE7's inability to render this property, however, every now and then it would have to work in IE7. This is an example of the display: table
method:
New Method
Ever since I came across the IE7 inline-block hack, I've been using it whenever I can. It works in IE7, why wouldn't I use it everywhere?Inline-blocks can be centered with the use of text-align: center
. Therefore, a list of inline-blocks can be centered extremely easily. This works absolutely wonderfully for horizontally centered navigations, or anything that doesn't have block level elements within it.
This is an example of a navigation dynamically centered with the use of inline-block elements and the text-align: center
property:
inline-block
, however an inline element which receives hasLayout behaves as if it were an inline-block. zoom: 1
is one of the properties which forces hasLayout on an element in IE.
Conclusion
This is an extremely simple way of solving a dynamically centered navigation problem with brilliant browser support. It may not be the solution for everydisplay: table
that is/was used, but it can definitely help in a bunch of different scenarios.