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 ，因此默認情況下會將其自身放置在其父項的左側。 您可以通過刪除float屬性來解決此問題：

.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，但是您可能需要將其調整為您選擇的高度）。