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

Question

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

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

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

Here's a jsFiddle example。此示例还说明了vertical-align: middle无效的原因。

我希望img以div的文本为中心。也就是说，即使文本被包裹到多行，图像也会以单行为中心。理想情况下，解决方案不会涉及在图像上设置边距/填充，即使我不知道线高也会有效。

我读过的东西：

How do I vertically align text next to an image with CSS?（处理图片较大的情况，此处似乎不适用）

Understanding vertical-align

Answer 1

问题的原因是图像相对于周围文本的x-height垂直居中。在放大的屏幕截图中可以清楚地看到这一点，其中包含了周围文字的baseline和mean line：

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

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

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

以下是a comparison before and after the margin-adjustment，字体大小不同。

Answer 2

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

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

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

此致

Answer 3

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