Как заставить мою навигационную панель вертикально центрироваться

Question

Я пытаюсь понять, как сосредоточиться на моей навигации по вертикали и на всю жизнь, я изнуряю «Правый клик», «Проверяю элемент» и пытаюсь увидеть в реальном времени, как чтобы мои вкладки были центрированы в зависимости от изображения в середине.

site if you want to do Right Click > Inspect Element

Код:

HTML

<!-- NAVIGATION BAR --> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="/news/">News</a> 
        </li> 
        <li> 
         <a href="/games/">Games</a> 
        </li> 
        <li> 
         <a class="logo" href="href logo link"> 
          <img src="logo.png" alt="logo"> 
         </a> 
        </li> 
        <li> 
         <a href="/about/">About</a> 
        </li> 
        <li> 
         <a href="/blog/">Blog</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

CSS

.navbar-fixed-top, .navbar-fixed-bottom { 
    position: fixed; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
    -webkit-transform: translate3d(0,0,0); 
    -o-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0);} 

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 20px; 
    border: 1px solid transparent;} 

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto;} 

.navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: middle; 
    margin: 0;} 

.navbar-nav>li { 
    float: left;} 

.nav>li { 
    position: relative; 
    display: block;} 

Answer 1

изменение

.navbar-nav > li{ 
    float:left 
    } 

к

.navbar-nav > li{ 
    display: inline-block !important; 
    vertical-align: middle !important; 
    } 

это поможет, если вы сделаете что Humongous логотип немного (много) меньше, или это займет много вертикального пространства, но в любом случае, как и фас, как идет ваш вопрос, здесь у вас есть ваш ответ.

ВНИМАНИЕ: Это поможет вам достичь этого эффекта в настольных экранах, но вам придется настроить для небольших экранов, так что проверить и настроить по своему желанию. Мой совет должен был бы применить некоторый контроль для этого логотипа, как:

.nav > li > a > img { 
    width: 100%; 
    height: auto; 
    max-width: 300px; 
} 

или что вы хотите/должны. Просто не оставляйте его «как есть»