Bootstrap導航欄品牌集中在導航欄中

Question

我試圖將自己的品牌形象集中在navbar navbar-inverse的引導程序中。儘量使用填充，圖像堅持坐在酒吧的底部，而不是正確居中。我使用下面的代碼：

HTML：

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img alt="Brand" src="se-logo.png" height="30px"></a> 
    </div> 
</nav> 

CSS：

.navbar-brand { 
    padding-left: 50px; 
    padding-bottom: 25px; 
} 

Answer 1

的主要問題是，.navbar-brand是一個浮動元素。如果您檢查樣式，它有一個float:left，所以默認情況下它將自己定位在其父項的左側。您可以通過刪除浮動屬性來解決該問題：

.navbar-brand { 
    float:none; 
} 

圖像仍然不會居中（垂直或水平）。要居中，你可以更新樣式的容器（.nav-header）的添加text-align（所以圖像水平對齊），並更新line-height的值（所以它垂直對齊太）：

.navbar-header { 
    text-align:center; 
    line-height:50px; 
} 

你可以看到它在這裏工作（或在此JSFiddle）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
<style> 
 
.navbar-header { 
 
    text-align:center; 
 
    line-height:50px; 
 
} 
 

 
.navbar-brand { 
 
    float:none; 
 
} 
 
</style> 
 

 

 
<nav class="navbar navbar-inverse" role="navigation"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img alt="Brand" src="http://lorempixel.com/200/30/abstract" height="30px" /></a> 
 
    </div> 
 
</nav>

（我用line-height:50px因爲高度.navbar是50px，但您可能需要將其調整爲您選擇的高度）。