我想让我的列表(导航)与图像(徽标)的中心对齐。我尝试使用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,从我读过的内容来看。)
无论如何,任何帮助将不胜感激。