Centrer une image dans un twitter navbar bootstrap

Question

Voici mon site en direct: http://ancient-badlands-4040.herokuapp.com/

Je suis en train de centrer mon image et ont également les liens alignés verticalement avec l'image.

j'ai eu beaucoup d'aide avec ce jusqu'à après avoir lu ce post Twitter Bootstrap - centering brand logo in navbar

j'ai réussi centrant plus tôt mon image en ajustant ma classe « marque » (je mets la largeur à 28%). Malheureusement, j'ai dû ajuster la largeur de la classe "navbar", après avoir ajusté la largeur, cela a changé la position de mon logo.

J'ai changé mon code en suivant ce qui suit, j'essaie de centrer mon image et d'aligner les liens avec mon image centrale.

Toute aide serait appréciée, merci! :)

HTML: ** Mise à jour et classes divs ul

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner "> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <div class="nav-collapse collapse"> 
     <ul class="nav pull-right"> 
      <li><a>CODEY</a> 
      </li> 
      <li> <a>CODEY</a></li> 
     </ul> 

     <ul class="nav pull-left"> 
      <li><a>CODEY</a></li> 
      <li><a>CODEY</a></li> 
      <li><a>CODEY</a></li> 
      </ul> 

      <a class="brand"></a> 
      <%= image_tag 'ctclogonewnobg.png', alt: 'logo' %> 

     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    </div> 

CSS:

$navbarLinkColor: #90fce8; 
$navbarBackground: #ff3600; 
$navbarBackgroundHighlight: #ff3600; 
$navbarText: Archivo Black, sans-serif; 
@import url(http://fonts.googleapis.com/css?family=Archivo+Black); 


@import 'bootstrap'; 

body { 

    background: url('escheresque_@2X.png'); 
} 


@import 'bootstrap-responsive'; 

.navbar-inner { 
    @include box-shadow(none !important); 
    border: 0; 
    width: 100%%; 
    margin: auto; 
} 



.navbar .brand { 
    margin-left: auto; 
    margin-right: auto; 
    width: 20px; 
    float: none; 

} 

Answer 1

Voici des exemples de couple pour vous dans un CodePen - http://codepen.io/michaellee/pen/nLmJa

Fondamentalement, la première l'exemple utilise display: inline-block; aligner tout dans une ligne et aligner verticalement: milieu; les blocs. Le deuxième exemple est plus proche du vôtre, où vous pouvez faire flotter les nav à la gauche et à la droite et utiliser le rembourrage pour créer un look vertical et centré.

HTML

<header> 
    <ul class="nav-left"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
    <span class="logo">Logo!</span> 
    <ul class="nav-right"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
</header> 
<br /> 
<header class="second"> 
    <ul class="nav-left"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
    <span class="logo">Logo!</span> 
    <ul class="nav-right"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
</header> 

CSS

header{ 
    width: 100%; 
    text-align: center; 
    background: #e63100; 
    display:block; 
    overflow: hidden; 
} 
ul{ 
    list-style: none; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0; 
    padding: 0; 
    li{ 
    display: inline-block; 
    } 
} 

.logo{ 
    font-size: 30px; 
    vertical-align: middle; 
    margin: 0 40px; 
} 

.second{ 
    .nav-left{ 
    float: left; 
    } 
    ul{ 
    padding: 30px 0; 
    } 
    .nav-right{ 
    float: right; 
    } 
    .logo{ 
    padding: 20px 0; 
    display: inline-block; 
    } 
}