如何使用垂直对齐：中间;正常吗？

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，则父具有0像素的高度，并因此它的位数是子元素的上方。

所以，你可能你的菜单后添加<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; }