Center the nav in Twitter Bootstrap

Question

I want to be able to center the nav dead middle of a page and have it stayed centered in different resolutions. I don't want to use offsets to push it over or margin-left as this would just screw it up in different browser widths. This is the typical bar that I am messing around with but the ul always winds up left aligned.

     <div class="navbar navbar-fixed-top">       <div class="navbar-inner">            <div class="container">                 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                      <span class="icon-bar"></span>                      <span class="icon-bar"></span>                      <span class="icon-bar"></span>                 </a>                 <div class="nav-collapse">                      <ul class="nav">                           <li class="active"><a href="#">Menu</a></li>                           <li><a href="#">On Tap</a></li>                           <li><a href="#">Shows</a></li>                           <li><a href="#">Surfwear</a></li>                           <li><a href="#" >Contact</a></li>                      </ul>                 </div><!--/.nav-collapse -->            </div><!-- container -->       </div><!-- navbar-inner -->  </div><!--  navbar navbar-fixed-top --> 

Answer 1

Possible duplicate of Modify twitter bootstrap navbar. I guess this is what you are looking for (copied):

.navbar .nav, .navbar .nav > li {   float:none;   display:inline-block;   *display:inline; /* ie7 fix */   *zoom:1; /* hasLayout ie7 trigger */   vertical-align: top; }  .navbar-inner {   text-align:center; } 

As stated in the linked answer, you should make a new class with these properties and add it to the nav div.

Answer 2

For anyone needing this for Bootstrap 3, it is now much easier.

The new nav-justified class can be used to center all of the navbar links..

http://www.bootply.com/g3g125MLGr

<div class="navbar">   <ul class="nav nav-justified" id="myNav">     <li><a href="#">Home</a></li>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>   </ul> </div> 

Or with a little CSS you can center just the brand/logo, and keep the left/right links separate..

http://www.bootply.com/3iSOTAyumP