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

我从我放置它们的地方取了所有vertical-align: middle;（我在每个元素中测试过它，即使它只应该应用于#logo，从我读过的。）

无论如何，任何帮助都将不胜感激。

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

如何使用vertical-align：middle;正常吗？

2 个答案: