Bootstrap品牌不是垂直居中在導航欄中

Question

我在中心垂直放置我的品牌徽標時遇到問題。截至目前我呈現的HTML看起來像這樣：

<a class='navbar-brand' href='#'> 
     <img alt="brand" height="200%" src="/assets/logo.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 
}