html - 如何在一条线上垂直居中图像？

Question

当图像小于行高时，使图标居中的最佳方法是什么？

例如（内联样式以便于阅读）：

<div style="line-height: 20px">
  <img style="width: 12px; height: 12px;"/>
  Blah blah blah
</div>

这是一个 jsFiddle 示例。此示例还说明了为什么vertical-align: middle不起作用。

我希望 img 以 div 的文本为中心。也就是说，即使文本换成多行，图像也会以单行为中心。理想情况下，该解决方案不涉及在图像上设置边距/填充，即使我不知道行高也可以工作。

我读过的东西：

如何使用 CSS 垂直对齐图像旁边的文本？（处理图像较大的情况，这里似乎不适用）

score 32 · Accepted Answer

问题的原因是图像相对于周围文本的x 高度垂直居中。这可以在放大的屏幕截图中非常清楚地看到，其中包括周围文本的基线和平均线：

与周围文本的基线和平均线相比，垂直对齐的图像的插图

无论您使用哪种字体大小或行高，图像都会以类似方式对齐。因此，在印刷意义上，图像实际上是正确垂直对齐的。但是，如果您想调整对齐方式以使图像的中心更靠近平均线，只需使用以下命令将其向上移动一点margin-bottom：

img.icon {
    margin-bottom: 0.25em;
}

0.25 em 的值是相当随意选择的，基于我尝试时看起来不错的值。根据口味自由调整。

score 4 · Accepted Answer

为什么不将图像设置为 div 元素的背景？IE：

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;">
  Blah blah blah
</div>

这会将图像定位在左上角。至少我会这样做。

问候

score 3 · Accepted Answer

尝试制作父母容器display: table和display: table-cell. 之后vertical-align: middle应该以“表格方式”工作。

3 回答 3