How to horizontally center elements of a dynamic width

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:

You may have noticed that the HTML doesn’t have spaces between the elements for readability like the previous example does. This is because the elements are treating the spaces/enters/tabs between them as an actual space since they are behaving like inline elements. IE7 doesn’t support 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 every display: table that is/was used, but it can definitely help in a bunch of different scenarios.

Any questions or comments?

  1. Newbie Drewbie says:

    Nice, now do one for vertical centering!

    1. Jamy Golden says:

      Haha yeah the vertical centering solution isn’t as clean. I am planning on doing one though, since it is something that crops up quite often.

    2. Jared says:

      First visit to the site, just wanted to say that I love the comment section layout/design.

    3. Jamy Golden says:

      Thank you :)

    4. Eric says:

      Using the above jsfiddle, I modified it to vertically align the list.

      The key here is to absolutely position the ul 50% from the top and also give the ul a negative top margin of 1/2 it’s height.

      http://jsfiddle.net/erier/Wa37V/4/

    5. Eric says:

      As a follow up to the previous, I gave each a fixed line-height which would force the to the same height. Then I gave the a negative top margin of 1/2 the line height.

    6. ATIF says:

      Try this code for vertical centering….

      #container{ width:500px (whatever); height:500px (whatever); position:reletive ; }

      #vertical-centering{ width:200px (specific); height:200px (specific); position:absolute; top:0px; bottom; 0px; left:0px; right:0px; margin:auto; }

    7. sabeersas says:

      @ATIF
      thanks bro….its working

  2. Evelyn Tushc says:

    It is best to use   items to fill out the spaces between elements. This is easy to do with Javascript automatically. The JS can measure the position of the items after the insertion of the   and terminate the operation when the measured position is as it was wanted.

    1. Jamy Golden says:

      Hey, yeah it’s possible, but the whole point of doing it with CSS is to keep javascript out, otherwise we may as well just use js and set the width of the container to the element itself and margin: 0 auto;.

  3. Muhammad Hassaan says:

    HTML:

    <a href="#" rel="nofollow">Home</a>
    <a href="#" rel="nofollow">Careers</a>
    <a href="#" rel="nofollow">About</a>
    <a href="#" rel="nofollow">Contact</a>

    CSS:

    *{ margin:0px; padding:0px;}
    #wrapper{ width:980px; margin:auto; }
    #center_me{ width:500px; margin:auto; }
    #center_me a{ text-align:center; float:left; margin-right:10px; text-decoration:none; display:block;}

    I think it is the best solution using <a> tags within the div and align them as center.

    It works in all browsers…..

    1. Jamy Golden says:

      Hi Muhammad, in your example you are centering elements of a fixed width. I’m not sure what your viewport width is but your example isn’t centering the items at all. You are centering #center_me, not the anchor elements.

  4. Exodia says:

    Hey, it has not effect when the element’s position is fixed, any idea?

  5. Isaac Rabin says:

    Many many thanks…. At last I got the little code display: table; that make my inside div to adjust as per my content size…. again thanks.

Leave a Reply to Evelyn Tushc Cancel reply