内部.navbar品牌的垂直对齐标志与Bootstrap 3

Question

使用Bootstrap 3.3.7

我有以下标记：

<div class="obj">
  <div class="center">Test</div>
</div>

我试图做的就是让徽标图像在<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>

内垂直居中显示

相反，它呈现如下：

我希望它像这样呈现：

我能让它看起来像我想要的唯一方法就是应用hacky CSS：

.navbar-brand

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

我已经查看过Vertically align a navbar-brand with bootstrap以及其他有关垂直对齐的帖子。

有些帖子建议在img { margin-top:-7.5px; display: inline-block; } 上设置height:属性。我不明白为什么这是必要的，因为默认的导航栏高度是50px而我的图像只有36px高。

请有人帮忙吗？

Answer 1

您可以添加一些自定义样式，并在display: flex元素上设置align-items: center和navbar-brand。

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