不能中心引導導航欄

Question

我試圖居中這樣的：http://jsfiddle.net/MikeStardust/hwhS5/導航欄，但沒有運氣...

通過中心我的意思是在導航的中心在一個單行排列的元件... 查了幾個解決方案，但都沒有工作，導致一箇中心對齊的導航欄，每行一個元素。

欄HTML（CSS & HTML上的jsfiddle）

<div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" 
       data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="navbar-collapse collapse navbar-responsive-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="http://chaoticunited.com/forums">Forums</a></li> 
     <li><a href="servers.html">Servers</a></li> 
     <li><a href="help.html">Help Center</a></li> 
     <li><a href="#" data-toggle="modal" data-target="#vote">Vote</a></li> 
     <li><a href="#">Donate</a></li> 
     </ul> 
    </div><!-- /.nav-collapse --> 
    </div><!-- /.navbar 

我有這樣的：

，並希望有這樣的：（從Photoshop結果）

Answer 1

嘗試將.navbar-nav的顯示值更改爲內嵌塊，然後將text-align應用於其父項以控制對齊。

如果您需要更改移動視圖對齊，則可以在該斷點處重新應用text-align。

.navbar-nav { 
    display: inline-block; 
} 

.navbar-default { 
    text-align: center; 
} 

例子：http://jsfiddle.net/hwhS5/2/