Comment centrer verticalement ma barre de navigation

Question

J'essaye de comprendre comment centrer ma navigation verticalement et pour la vie de moi, j'ai été épuisant "Clic droit> Inspecter l'élément" et essayer de voir en temps réel comment pour obtenir mes onglets centrés en fonction de l'image au milieu.

site if you want to do Right Click > Inspect Element

code:

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

changement

.navbar-nav > li{ 
    float:left 
    } 

à

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

il serait utile si vous faites ce logo Humongous un peu (beaucoup) plus petit, ou il faudra beaucoup d'espace vertical, mais de toute façon, comme fas que votre question va, ici vous avez votre répondre.

AVERTISSEMENT: Cela vous aidera à atteindre cet effet dans les écrans de bureau, mais vous aurez à régler pour les petits écrans, afin de vérifier et d'ajuster à volonté. Mon conseil serait d'appliquer une sorte de contrôle à ce logo, comme:

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

ou tout ce que vous voulez/besoin. Ne le laissez pas "tel quel"