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上）：

＆＃13;

<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>

＆＃13;

（我使用line-height:50px，因为.navbar的高度为50px，但您可能希望将其调整为您选择的高度。

Bootstrap导航栏品牌在导航栏中居中

1 个答案: