Centratura verticale di una barra di navigazione

Question

Ho un'intestazione con due elementi. La prima è un'immagine che è un logo aziendale ed è impostata su una larghezza del 25%. L'altra è una barra di navigazione con i suoi elementi impostati in linea in modo che sia orizzontale. Mi piacerebbe che la barra di navigazione fosse posizionata verticalmente al centro, ma per la vita di me non riesco a capirlo. Ho impostato tutto ciò che so su un elemento che può utilizzare l'allineamento verticale e mettere tutto in riga o cella di visualizzazione per applicarlo. Niente funziona.

Tenete a mente che il motivo per cui non si limitano a dare una statica percentuale padding o del margine superiore è perché come pagina si allarga l'altezza dell'immagine si espande come la larghezza fa come si espande il browser in orizzontale il navigatore diventa più e più fuori luogo.

Apprezzerei molto qualsiasi aiuto come ho provato (molto più a lungo di quanto mi piacerebbe ammettere) semplicemente centrando un oggetto verticalmente.

HTML abbattuti:

<div id="container"> 
<header id="header" role="banner"> 
    <img src="images" /> 
    <nav id="nav" role="navigation"> 
    <ul> 
     <li><a href="#" title="About Us">About Us</a></li><li><a href="#" title="Biographies">Biographies</a></li><li><a href="#" title="Services">Services</a></li><li><a href="#" title="Careers">Careers</a></li><li><a href="#" title="Contact">Contact</a></li> 
    </ul> 
    </nav> 
</header> 

CSS abbattuti:

header img { 
    height: auto; 
    width: 25%; 
    float: left; 
    } 

header nav { 
    width: 75%; 
    font-size: 1em; 
    } 

header nav li { 
    display: inline-block; 

    width: 19%; 
    } 

header nav li a { 
    background: #2CB2E6; 
    line-height: 

Heres un semplice jsFiddle: http://jsfiddle.net/LbTCT/

Answer 1

Here's a fork del vostro violino originale. Hai bisogno di essere impostazione inline-block sul vostro logo e l'elemento nav stesso:

header img, header nav { 
    display: inline-block; 
    vertical-align: middle; 
} 

piuttosto che cercare di float cose.

Answer 2

La risposta relativa al mettere tutto come un blocco in linea è corretta. Il float non sta facendo nulla per te in quella situazione se non rompere elementi dal flusso di documenti. Tuttavia, se ci si rivolge browser più vecchi, ecco una soluzione che dovrebbe funzionare per coloro che non supportano vertical-align di fuori di celle:

Example Fiddle

e le relative variazioni CSS sono qui:

header { 
    position:relative; 
    display:block; 
} 
header:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content:" "; 
    clear: both; 
    height: 0; 
} 
header nav { 
    width: 70%; 
    font-size: 1em; 
    position: absolute; 
    top: 50%; 
    line-height: 200%; 
    margin-top: -2em; 
} 

Answer 3

Ecco un modo per farlo che comporta un piccolo cambiamento nel mark-up.

<div id="header"> 
<header role="banner"> 
    <nav id="navigation" role="navigation"> 
     <ul> 
      <li> 
       <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png"> 
      </li> 
      <li><a href="#" title="About Us">About Us</a> 

      </li> 
      <li><a href="#" title="Biographies">Biographies</a> 

      </li> 
      <li><a href="#" title="Services">Services</a> 

      </li> 
      <li><a href="#" title="Careers">Careers</a> 

      </li> 
      <li><a href="#" title="Contact">Contact</a> 

      </li> 
     </ul> 
    </nav> 
    </header> 
</div> 

e il CSS si presenta come:

#header { 
     background-color: #cccccc; 
     padding: 5px 0; 
    } 
    header { 
     background-color: #f0f0f0; 
    } 
    header nav { 
     border: 1px solid red; 
    } 
    header nav ul { 
     margin: 0; 
     padding: 0; 
    } 
    header nav li { 
     display: inline; 
     margin: 0; 
     padding: 0; 
    } 
    header nav li img { 
     vertical-align: middle; 
     border: 1px solid blue; 
    } 
    header nav li a { 
     vertical-align: middle; 
     font-size: 1.00em; 
     text-decoration: none; 
     background-color: white; 
     color: black; 
     padding: 10px; 
     margin: 0 0 0 10px; 
    } 

La chiave è quello di mettere l'immagine del logo nella prima <li> elemento della vostra lista. Quindi visualizza tutti gli elementi dell'elenco come inline e utilizza vertical-align: middle per allinearli.

È possibile regolare le proprietà di riempimento e margine per ottenere l'aspetto esatto di cui si ha bisogno.

violino per riferimento: http://jsfiddle.net/audetwebdesign/adW9Y/

NOTA:
Il codice si presta anche a consentire la dimensione dell'immagine in scala con la finestra.

Aggiungendo la seguente regola CSS:

.autoSize { 
    width: inherit; 
} 
.autoSize img { 
    width: 25%; 
} 

e aggiungendo una classe al mark-up come segue:

<li class="autoSize"> 
    <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png"> 
</li> 

Poiché l'elemento ul espande alla larghezza della porta di visualizzazione, puoi ereditare la larghezza sull'elemento figlio li che avvolge l'immagine. Quindi si imposta una larghezza relativa per l'immagine (25% in questo esempio) e si ottiene il ridimensionamento flessibile/reattivo.