Центр бренда в navbar

Question

Я использую Twitter Bootstrap 3.0 и не могу на всю жизнь понять, как центрировать изображение бренда на навигационной панели.

http://jsbin.com/efagoj/99/edit?html,output

<div class="navbar navbar-fixed-top" style="background-color: orange;"> 
    <a class="btn btn-navbar pull-left">Left Text</a> 
    <a class="btn btn-navbar pull-left">Left Text 2</a> 
    <div class="navbar-inner"> 
    <div class="container-fluid" style="text-align: center;"> 
     <a class="brand" href="#" style="margin:0 auto; float: none;"> 
     <img src="http://i.imgur.com/XlPrrVD.png" style="height:30px;">  
     </a> 
    </div> 
    </div> 
    <a class="btn btn-navbar pull-right">Right Text</a> 
</div> 

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

Answer 1

Я думаю, что это решение может быть более приемлемым, чем его вывод из потока страницы. Поэтому, если у вас есть два плавающих контейнера, один слева и один справа, оба одинаковой ширины, то div в центре должен быть правильно расположен для центрирования.

http://jsbin.com/efagoj/116/edit

Это, однако, требует достаточно ширины на странице, чтобы выглядеть правильно. Кроме того, вам нужно будет убедиться, что как левая, так и правая всегда одинаковая ширина, если навигационная панель когда-либо изменена ... Таким образом, позиция абсолютная с запросами @media может быть лучше для вас.

Answer 2

Вы можете удалить <img/> и добавить этот CSS

.navbar{ 
    background: url("http://i.imgur.com/XlPrrVD.png") top center no-repeat; 
    background-size:100 30px; 
} 

http://jsbin.com/efagoj/101/

и код http://jsbin.com/efagoj/101/watch?html,css,js,output

если вы хотите сохранить свой код, чтобы добавить ссылку на ваш <img/>

оных. imgCenter на вас изображение и это css

.imgCenter{ 
    position:absolute; 
    left:50%; 
    width:100px; 
    margin-left:-50px; 
}