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

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 , 具有不同的字体大小。