如何将图片中点垂直对齐至父元素字体的完整x-height？

CSS的vertical-align: middle属性会将行内元素的中点垂直对齐到父元素字体x-height的一半，但这常会导致图片位置比预期偏低。有没有办法让任意图片的中点精准对齐到父元素字体的完整x-height？

尝试过给图片设置vertical-align: calc(1ex - 50%)但无效，因为计算值里的50%是取父元素高度的一半，而非图片自身高度的一半。

用带中线的测试图片（）设置vertical-align: middle的示例代码如下：

img {
  vertical-align: middle;
}

<p>This is some text with an <img src="https://i.sstatic.net/fPdDaN6t.png"> image</p>

实际效果：

期望效果：

可以通过**vertical-align结合CSS变换**实现需求，这种方法不受图片尺寸和父元素样式影响，适配性强：

img {
  /* 先将图片顶部对齐到字体x-height的顶部 */
  vertical-align: text-top;
  /* 向上偏移自身高度的50%，再向下偏移0.5ex（x-height的一半），让图片中点对齐到x-height的底部 */
  transform: translateY(calc(0.5ex - 50%));
}

原理说明 #

• vertical-align: text-top：将图片的顶部与父元素字体x-height的顶部对齐；
• transform: translateY(calc(0.5ex - 50%))：50%是相对于图片自身高度的一半，向上偏移这个值会让图片中点移到原顶部位置，再减去0.5ex（x-height的一半），最终让图片中点刚好对齐到x-height的底部，符合期望效果。

如果不想用变换，也可以通过显式设置图片line-height来让vertical-align的百分比生效：

img {
  line-height: 1;
  vertical-align: calc(1ex - 50%);
}

不过这种方法依赖line-height的设置，若父元素line-height被修改可能失效，因此更推荐第一种变换方案。

验证示例代码：

img {
  vertical-align: text-top;
  transform: translateY(calc(0.5ex - 50%));
}

<p>This is some text with an <img src="https://i.sstatic.net/fPdDaN6t.png"> image</p>

内容的提问来源于stack exchange，提问作者v-rob