将导航栏品牌与引导程序垂直对齐

时间:2015-12-12 06:25:46

标签: html css twitter-bootstrap twitter-bootstrap-3

如何在中间垂直对齐navar-brand img?

enter image description here

那个黑盒子是我想在中间对齐的徽标。

标记是:

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand" href="#">
        <img alt="Brand" width="163" height="36" src="...">
    </a>
</div>

2 个答案:

答案 0 :(得分:1)

只需将此添加到您的css:

.navbar-brand{
    min-height: 66px !important;
}
.navbar-header{
    min-height: 66px !important;
}

答案 1 :(得分:0)

您是否尝试过css属性&#39; vertical-align:top;&#39;?如果它不起作用,请尝试相对定位,并亲自看看它是否完美对齐。