Come usare vertical-align: middle; propriamente?

Question

Io voglio avere la mia lista (NAV) di allineare al centro di un'immagine (logo). Ho provato ad utilizzare vertical-align: middle;, ma non riuscivo a farlo funzionare quando ho galleggiato le immagini sinistra e destra.

Ecco il mio codice:

HTML:

<div id="head">
    <img id="logo" src="logo.png" />
    <ul id="nav">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

CSS:

#head {
    margin-top: 2px;
    width: 100%;
}
    #logo {
        float: left;
        }

    ul#nav {
        float: right;
        }

        ul#nav li {
            display: inline;
            list-style-type: none;
            }

Ho preso tutte le vertical-align: middle; di da dove li ho messi (ho provato in ogni elemento, anche se è stato solo dovrebbe essere applicato a Logo, da quello che ho letto.)

In ogni modo, tutto l'aiuto sarebbe apprezzato.

Answer 1

Vertical-align:middle allinea la mediana di elemento figlio alla mediana di elemento padre. Se tutti gli elementi figlio sono float:left, quindi il genitore ha un'altezza di 0px e quindi la sua mediana è al di sopra degli elementi secondari.

Quindi, si potrebbe aggiungere un <br style='clear:both' /> dopo il vostro menu e il DIV potrà finalmente ottenere la sua dimensione verticale.

Answer 2

tabella con un'unica fila, è particolarmente utile qui.

<div id="head">

<table>
<tr>

<td>
  <h1>Fluid Heading</h1>
</td>

<td style="width: 5%">
  <img id="logo" src="logo.png" />
</td>

<td style="width: 5%">
  <ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</td>

</tr>
</table>

</div>

CSS:

.head td { vertical-align: middle; }