Twitter Bootstrap 3.0.3 Navbar 정렬 Navbar Header

Question

내 Navbar 브랜드 로고를 정렬하는 데 어려움이 있습니다.

현재 내 로고는 왼쪽으로 정렬됩니다.

실제로 첫 번째 링크에서 중심에 정렬하고 싶습니다. 친절 샘플은 아래를 찾을 수 :

<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> 

정말 당신의 친절한 대답을 필요 JSFiddle

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

에 내 코드를 검색 할 수 있습니다. 여기에서

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; 
}