ein Bild in einem Twitter Bootstrap navbar

Question

Hier ist meine Live-Website Zentrieren: http://ancient-badlands-4040.herokuapp.com/

Ich versuche, mein Bild zu zentrieren und haben auch die Verbindungen vertikal mit dem Bild auszurichten.

ich damit bisher viel Hilfe bekam nach dem Lesen dieser Post Twitter Bootstrap - centering brand logo in navbar

ich erfolgreich war früher meine „Marke“ Klasse mein Bild Zentrierung durch Einstellung (habe ich die Breite auf 28%). Leider musste ich auch die Breite der "navbar" -Klasse anpassen, nachdem ich die Breite angepasst hatte, änderte sich die Position meines Logos.

Ich habe meinen Code wie folgt geändert. Ich versuche, mein Bild zu zentrieren und die Links gleichmäßig mit meinem Bild in der Mitte auszurichten.

Jede Hilfe wäre willkommen, danke! :)

HTML: ** Aktualisiert divs und ul Klassen

<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

Hier sind ein paar Beispiele für Sie in einem CodePen - http://codepen.io/michaellee/pen/nLmJa

Grundsätzlich ist der erste Beispiel verwendet display: Inline-Block; um alles in einer Linie auszurichten und vertikal auszurichten: Mitte; die Blöcke.

Das zweite Beispiel ist mehr wie Ihres, wo Sie die Navs nach links und rechts schweben lassen und Padding verwenden können, um ein vertikal zentriertes Aussehen zu erzeugen.

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