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

Question

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

例如(样式内联以便于阅读):

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

这是一个jsFiddle示例.这个例子也说明了为什么vertical-align: middle不起作用.

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

我读过的东西:

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

了解垂直对齐

Answer 1

问题的原因是图像相对于周围文本的x高度垂直居中.这可以很清楚地看到的,其中的放大屏幕截图基线和平均线周围的文本被包括:

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

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

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

这是边距调整之前和之后的比较,具有不同的字体大小.