Wie vertical-align verwenden: Mitte; richtig?

Question

Ich möchte, dass meine Liste (nav) align zum Zentrum eines Bildes (Logo) haben. Ich habe versucht, vertical-align: middle;, aber ich konnte es nicht zur Arbeit, wenn ich die Bilder links und rechts schwebte.

Hier ist mein Code:

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

Ich habe die ganze vertical-align: middle; ist, von wo ich sie setzen (Getestet habe ich es in jedem Element, auch wenn es nur auf #logo angewendet werden sollte, von dem, was ich gelesen habe.)

Wie auch immer, jede mögliche Hilfe würde geschätzt.

Answer 1

Vertical-align:middle ausrichtet den Median untergeordnetes Element mit dem Median der Elternelement. Wenn alle untergeordneten Elemente float:left haben, dann die Eltern eine Höhe von 0px hat und damit sein Median ist über den untergeordneten Elemente.

Also, Sie könnten einen <br style='clear:both' /> nach dem Menü hinzufügen und das DIV endlich seine vertikale Größe.

Answer 2

Tabelle mit einreihigen kommt hier praktisch.

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