부트 스트랩 브랜드가 탐색 바에 수직으로 센터링하지 않습니다.

Question

브랜딩 로고가 가운데에 세로로 배치되는 데 문제가 있습니다. 현재 지금 내 렌더링 된 HTML은 다음과 같습니다 : 나는 크기로 높이를 설정하지 않은 경우

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

이는 PNG의 전체 크기가됩니다. 그러나 나의 브랜딩은 내 탐색 막대의 나머지 부분과 수직적 인 중심이 아닙니다.

네비게이션 바에 브랜드에 대한 나의 CSS는 다음과 같습니다

나는 네비게이션 바이 센터를 만들기 위해 내 CSS에서 필요합니까 무엇

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

?

이것은 부트 스트랩 워드 프로세서에서 직접 가져온 네비게이션의 전체 렌더링입니다.

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