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

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/ !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/ !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.

Share it!Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInShare on StumbleUpon

Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top