Horizontally Centered Navigation

This Trick will help you center align your navigation when you do not know the exact width.

Navigation Markup

<ul id="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

Navigation CSS

#nav{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
#nav li{
  display:inline;
}
#nav a{
  display:inline-block;
  padding:10px;
}

Note

IE6–7 will only allow inline-block to work on elements that are inherently inline elements. display:inline-block; will not work on block-level elements.

Reference:

http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/