Twitter Bootstrap 3.0 Логотип в центре навигационной панели

Question

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

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> 
     <div class="navbar-header"> 
          <!-- I want this at the center of navbar --> 
      <a class="navbar-brand" href="#"><img src="logo.png"/></a> 
     </div> 
</div> 

Answer 1

Это было спросил несколько раз, например, here.

Я установил вверх jsfiddle, похожий на ваш HTML при условии, используя свой Gravatar, так как ваш логотип не был доступен: http://jsfiddle.net/q68VS/

Важно CSS:

.nav-center { 
    margin:0; 
    float:none; 
} 

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

Answer 2

К сожалению, принятый ответ с помощью HTML для Bootstrap 2. Тем не менее, я придумал несколько способов сделать это, используя Bootstrap 3. Простейший способ сделать это, вероятно, используя css translate.

.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 

Демо: http://codepen.io/candid/pen/dGPZvR

Этот метод позволяет также использовать фоновые изображения для логотипа и позволяет включать в текст без его отображаться на дисплее.

HTML:

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text</a> 

CSS:

.navbar-brand { 
    background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center/contain no-repeat; 
    width: 200px; 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 

Демо: http://codepen.io/candid/pen/NxWoJL

Если по какой-то причине вы только хотите сделать это на дисплее мобильного просто wrap .navbar-brand в запрос СМИ ...

/* CENTER ON MOBILE ONLY */ 
@media (max-width: 768px) { 
.navbar-brand { 
     transform: translateX(-50%); 
     left: 50%; 
     position: absolute; 
    } 
} 

Answer 3

Метод показал bwillis работает nicelly, но я должен был добавить некоторый запас для моего NavBar коллапса. Тогда для меня это было:

.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 

.navbar-collapse { 
     margin-top: 50px; 
} 

Я также нуждался в моей Navbar-нав по центру, а затем добавить:

.navbar-nav { 
    width: 100%; 
    text-align: center; 
} 
.navbar-nav > li { 
    float: none; 
    display: inline-block; 
}