0

非常基本的问题 - 我似乎无法垂直对齐列表内的图标。

我的 CSS 看起来像这样：

#top_content img {
float: left;
}

#top_content ul {
float: right;
}

#top_content li img {
vertical-align: sub;

}

#top_content li {
list-style-type: none;
display: inline;
}

#top_content li a {
text-decoration: none;
color: #7aa807;
}

我的 HTML 如下所示：

<div id="top_content">
<ul>
<li><img src="../img/mail_ico.png" alt="#"><a href="#"><strong>(1 New)</strong></a></li>
</ul>
</div>

有任何想法吗？我在这里做错了什么？

4

4 回答 4

3

尝试添加line-height：

#top_content img {
  float: left;
  line-height:20px; /* adjust accordingly */
}
于 2010-07-15T14:11:13.333 回答
2

期望垂直对齐正常工作:) 在您的情况下，是否可以将 mail_ico.png 设置为 <a> 上的背景图像？这就是我如何处理图像的垂直位置在设计中很重要的情况。

于 2010-07-15T14:10:46.623 回答
1

float: left基本上是抵消了的影响vertical-align。vertical-alignc 控制内联元素与同一文本行上的其他内联元素的对齐方式。float: left制作img一个块元素，对其vertical-align没有影响。

于 2010-07-15T14:15:56.363 回答
1

不要float头像。它将不再是inline行为，这就是导致您的问题的原因。

于 2010-07-15T14:13:53.580 回答