Center Navbar in Twitter Bootstrap 2.0

Question

Suppose we have the following markup for navigation bar using Twitter Bootstrap 2.0.

<div class="navbar navbar-fixed-top">   <div class="navbar-inner pull-center">       <ul class="nav">       <li class="active"><a href="#">HOME</a></li>                               <li><a href="#contact">CONTACT</a></li>       </ul>           </div> </div> 

What is the best way to center .nav inside navbar-inner?

I only came up with adding my own CSS styles:

@media (min-width: 980px) {     .pull-center {         text-align: center;     }     .pull-center > .nav {         float:none;         display:inline-block;         *display: inline; *zoom: 1;         height: 32px;     } } 

Answer 1

Override the width of the container within the navbar from auto to 960px.

.navbar-inner .container {width:960px;} 

Answer 2

To align it in the center with a dynamic width, I used the following:

HTML:

<div class="navbar">   <div class="navbar-inner">     <ul class="nav">       ....     </ul>   </div> </div> 

CSS:

.navbar .navbar-inner {     text-align: center; } .navbar .navbar-inner .nav {     float: none;     display:inline-block; } 

Didn't test it, but I guess only display:inline-block; could be a problem, which is supported in all browsers except for IE7 and lower..

http://caniuse.com/inline-block