3

我想让我的列表（导航）与图像（徽标）的中心对齐。我尝试使用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，从我读过的内容来看。）

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

4

2 回答 2

2

Vertical-align:middle将子元素的中值与父元素的中值对齐。如果所有子元素都有float:left，则父元素的高度为 0px，因此它的中位数在子元素上方。

因此，您可以<br style='clear:both' />在菜单后添加一个，DIV 最终将获得其垂直大小。

于 2010-03-13T17:35:24.010 回答
0

单行表在这里很方便。

<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; }
于 2012-01-15T14:13:38.970 回答