Bootstrap 品牌不在导航栏中垂直居中

Question

我无法将我的品牌徽标垂直居中。截至目前，我呈现的 html 看起来像这样：

   <a class='navbar-brand' href='#'>
        <img alt="brand" height="200%" src="/assets/logo.png" />

如果我不将高度设置为大小，它将是 png 的完整大小。但是我的品牌并不与导航栏的其余部分垂直居中。

我的导航栏品牌 CSS 如下所示：

.navbar-default .navbar-brand {
  color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
  background-color: transparent;
 }

我需要在我的 css 中使用什么来制作带有导航栏的中心？

这是导航栏的完整渲染，直接从引导文档中提取。

<nav class='navbar navbar-default' role='navigation'>
  <div class='container-fluid'>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class='navbar-header'>
      <button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
        <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" height="200%" src="/assets/logo.png" />
      </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
      <ul class='nav navbar-nav'>
        <li class='active'>
          <a href='#'>Link</a>
        </li>
        <li>
          <a href='#'>Link</a>
        </li>
        <li class='dropdown'>
          <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
            Dropdown
            <span class='caret'></span>
          </a>
          <ul class='dropdown-menu' role='menu'>
            <li>
              <a href='#'>Action</a>
            </li>
            <li>
              <a href='#'>Another action</a>
            </li>
            <li>
              <a href='#'>Something else here</a>
            </li>
            <li class='divider'></li>
            <li>
              <a href='#'>Separated link</a>
            </li>
            <li class='divider'></li>
            <li>
              <a href='#'>One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class='navbar-form navbar-left' role='search'>
        <div class='form-group'>
          <input class='form-control' placeholder='Search' type='text'>
        </div>
        <button class='btn btn-default' type='submit'>Submit</button>
      </form>
      <ul class='nav navbar-nav navbar-right'>
        <li>
          <a href='#'>Link</a>
        </li>
        <li class='dropdown'>
          <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
            Dropdown
            <span class='caret'></span>
          </a>
          <ul class='dropdown-menu' role='menu'>
            <li>
              <a href='#'>Action</a>
            </li>
            <li>
              <a href='#'>Another action</a>
            </li>
            <li>
              <a href='#'>Something else here</a>
            </li>
            <li class='divider'></li>
            <li>
              <a href='#'>Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->

Answer 1

您可以尝试使用绝对定位：

.navbar-brand {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: // half the width of your img
}