无法垂直对齐以使用列表内的 img 标签答案

【问题标题】：Can't get vertical align to work with img tag inside of a list无法垂直对齐以使用列表内的 img 标签
【发布时间】：2011-03-16 10:32:54
【问题描述】：

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

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

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

【问题讨论】：

标签： html css layout vertical-alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试添加line-height：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：