帶有Bootstrap 3的.navbar品牌內的垂直對齊徽標

Question

使用Bootstrap 3.3.7

我有以下標記：

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
            Company Name <img src="https://via.placeholder.com/220x36">
        </a>
    </div>
</div>

我要做的就是讓徽標圖像在.navbar-brand內部垂直居中顯示

而是這樣渲染：

我希望它呈現如下：

我可以使它看起來像我想要的唯一方法是應用hacky CSS：

img {
    margin-top:-7.5px; 
    display: inline-block;
}

小提琴在這里： https : //jsfiddle.net/swzj0uk0/1/

我看過將navbar品牌與bootstrap垂直對齊，以及有關垂直對齊的各種其他文章。

一些帖子建議在.navbar上設置height:屬性。 我不明白為什么這樣做是有必要的，因為默認導航欄高度為50px，而我的圖像高度僅為36px。

請有人幫忙嗎？

Answer 1

您可以添加一些自定義樣式並設置display: flex和align-items: center以navbar-brand元素為align-items: center 。

 .navbar-brand { display: flex; align-items: center; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-fixed-top navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> Company Name <img src="http://via.placeholder.com/220x36"> </a> </div> </div> </nav>