垂直整列使用方法：真ん中を。正しく？

Question

私は（NAV）の画像（ロゴ）の中央に合わせる私のリストを持っていると思います。私はvertical-align: middle;を使用してみましたが、私は、画像を左右に浮かべたとき、私はそれが仕事を得ることができませんでした。

ここに私のコードです：

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

私は（私はそれが唯一の私が読んだから、#logoに適用することになっていたにも関わらず、各要素でそれをテストした。）

私はそれらを置く場所からすべてのvertical-align: middle;年代を取りました

とにかく、任意の助けいただければ幸いです。

Answer 1

Vertical-align:middleは親要素の中央に子要素の中央値を揃えます。すべての子要素がfloat:leftを持っている場合は、親は0PXの高さを持っているので、その中央値は、子要素の上にある。

だから、あなたはあなたのメニューの後<br style='clear:both' />を追加する可能性があり、DIVが最終的にその垂直方向のサイズを取得します。

Answer 2

単一の行を持つテーブルには、ここに便利来ます。

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