Question

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

我的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>

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

Answer 1

尝试向其添加line-height：

#top_content img {
  float: left;
  line-height:20px; /* adjust accordingly */
}

Answer 2

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

Answer 3

不要float图片。它将不再是inline行为，这就是造成问题的原因。

Answer 4

float: left基本上取消了vertical-align的效果。 vertical-align控制内联元素与同一文本行上的其他内联元素的对齐。 float: left使img成为阻止vertical-align无效的块元素。

无法获得垂直对齐以使用列表中的img标记

4 个答案: