Twitter Bootstrap 3.0.3導航欄對齊導航欄標題

Question

我很難集中我的導航欄品牌標誌。

目前，我的標誌將遠左對齊。

實際上我想從第一個鏈接對齊它的中心。請在下面找到了例子：

請在下面找到我的代碼在的jsfiddle

http://jsfiddle.net/QSa8v/3/

<div id="navbar"> 
    <nav role="navigation" class="navbar-custom"> 
     <div class="navbar-header"> 
      <button data-toggle="collapse" data-target="#ren-nav-collapse" class="navbar-toggle"> 
       <span class="sr-only"> 
        Toggle navigation 
       </span> 
       <span class="icon-bar" /> 
       <span class="icon-bar" /> 
       <span class="icon-bar" /> 
      </button> 
      <a href="#" class="navbar-brand"> 
       <img src="http://i.imgur.com/CMEnIo7.png" /> 
      </a> 
     </div> 
     <div class="collapse navbar-collapse" id="ren-nav-collapse"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="#">LINK 1</a> 
       </li> 
       <li> 
        <a href="#">LINK 2</a> 
       </li> 
       <li> 
        <a href="#">LINK 3</a> 
       </li> 
       <li> 
        <a href="#">LINK 4</a> 
       </li> 
       <li> 
        <a href="#">LINK 5</a> 
       </li> 
       <li> 
        <a href="#">LINK 6</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div> 

真的需要你這樣回答。

Answer 1

在這裏看看：http://jsfiddle.net/QSa8v/4/

HTML變化：

<div id="navbar"> 
    <nav role="navigation" class="navbar-custom"> 
     <div class="navbar-header col-xs-3 myheader"> // CHANGE HERE 
      <button data-toggle="collapse" data-target="#ren-nav-collapse" class="navbar-toggle"> 
       <span class="sr-only"> 
        Toggle navigation 
       </span> 
       <span class="icon-bar" /> 
       <span class="icon-bar" /> 
       <span class="icon-bar" /> 
      </button> 
      <a href="#" class="navbar-brand mybrand">  // CHANGE HERE 
       <img src="http://i.imgur.com/CMEnIo7.png" /> 
      </a> 
     </div> 
     <div class="collapse navbar-collapse" id="ren-nav-collapse"> 
      <ul class="nav navbar-nav mybar">   // CHANGE HERE 
       <li> 
        <a href="#">LINK 1</a> 
       </li> 
       <li> 
        <a href="#">LINK 2</a> 
       </li> 
       <li> 
        <a href="#">LINK 3</a> 
       </li> 
       <li> 
        <a href="#">LINK 4</a> 
       </li> 
       <li> 
        <a href="#">LINK 5</a> 
       </li> 
       <li> 
        <a href="#">LINK 6</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div> 

CSS補充說：

.mybar { 
    margin-left:0px !important; 
} 
.mybrand{ 
    float:none !important; 
} 

.myheader{ 
    text-align: center; 
    padding: 1em; 
}