将导航栏品牌与引导程序垂直对齐 [英] Vertically align a navbar-brand with bootstrap

问题描述

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

那个黑框是我想在中间对齐的标志.

标记为:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#"><img alt="品牌" width="163" height="36" src="..."></a>

解决方案

只需将此添加到您的 css 中:

.navbar-brand{最小高度:66px！重要；}.navbar-header{最小高度:66px！重要；}

How can I align a navar-brand img vertically in the middle?

That black box is a logo I want to align in the middle.

The markup is:

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

解决方案

just add this to your css :

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

这篇关于将导航栏品牌与引导程序垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！