html - 带有 Bootstrap 3 的 .navbar-brand 内的垂直对齐 Logo

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>

我要做的就是让 Logo 图像在 .navbar-brand 中垂直居中显示

相反，它呈现如下:

我希望它像这样呈现:

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

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

fiddle 在这里:https://jsfiddle.net/swzj0uk0/1/

我看过Vertically align a navbar-brand with bootstrap以及关于垂直对齐的各种其他帖子。

一些帖子建议在 .navbar 上设置一个 height: 属性。我不明白为什么有必要这样做，因为默认的导航栏高度是 50 像素，而我的图像只有 36 像素高。

有人可以帮忙吗？

Answer 1

您可以添加一些自定义样式并在 navbar-brand 元素上设置 display:flex 和 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>