Twitter Bootstrap 3.0.3 Navbar Выравнивание заголовка Navbar

Question

У меня возникли трудности с центрированием логотипа бренда navbar.

В настоящее время мой логотип выровняется влево.

что я хочу, чтобы выровнять его по центру с первой ссылки. Просьба найти ниже для образца:

Здесь Вы можете найти свой код на 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; 
}