Navigation menu align centered using pure CSS rule width fit-content and IE hack

by Giorgos Grispos on May 3, 2013

Working at the moment on a responsive template for a new webiste coming live at thε end of Μαυ. All I need is a navigation list aligned centered which can work work fine with responsive framework Foundation zurb. The standard inline-list that foundation gives you cannot stay aligned centered which is quite common for many designs. Maybe they’ll add this functionality later on.

Here is a solution I came up by picking up some ideas and pices of CSS around the net.

HTML code

<nav class="container">
  <ul class="list-centered">
    <li><a href="#">Hello, this is</a></li>
    <li><a href="#">a centered</a></li>
    <li><a href="#">navigation menu</a></li>
    <li><a href="#">using ul li elements</a></li>
  </ul>     
</nav>

 

CSS Code

nav.container {max-width:inherit;}
ul.list-centered {
margin: 0 auto;
    width: -webkit-fit-content;
       width: -moz-fit-content;
            width: fit-content;
            display: table\0/ !important; /* IE 8-9 */
}
ul.list-centered li {float: left;margin:0 .5em;line-height: 2.188em;}

The magic use of CSS width:fit-content comes unfortunately with a limited support. Again IE browser is the problem while FF and Chrome supports this rule.

So end up with a small CSS hack to make IE 8+ to support it too.

display: table\0/ !important; /* IE 8-9 */

This weird piece of CSS you see is only visible from IE browsers. More information on that can be found here.

Be aware that code works only on FF, Chrome, Safari, IE8+ maybe there is a work around for IE7 also. By the way I’ve stopped supporting IE7.

Leave your comment

Required.

Required. Not published.

If you have one.