inline-box含图片时vertical-align:middle与父元素x-height的疑问

咱们来好好拆解你遇到的这个vertical-align: middle对齐问题，先把重现问题的代码贴出来，再逐个解答你的疑问：

重现代码 #

CSS

* { margin:0; padding:0; }
.body { font-family:Microsoft Yahei; font-size:16px; background-color:lightblue; height: 200px; width:200px; line-height:2; }
.body span { background-color:pink; }
.body img { width:50px; height:50px; }
.body .img-wrapper { background-color:orange; }
.body .img-wrapper { vertical-align:middle; }

HTML

<div class="body">
 <span class="wrapper">
 words-g words-g words-g
 <span class="img-wrapper">
 <img src="https://avatars3.githubusercontent.com/u/23273077" alt="">
 s
 </span>
 words-g words-g words-g
 </span>
</div>

疑问解答 #

1. 父元素的x-height取值及是否受图片影响

首先明确一个核心点：x-height是字体的固有属性，只由你设置的font-family（Microsoft Yahei）和font-size（16px）决定，和容器里的子元素（包括图片）完全无关。

对于微软雅黑这种无衬线字体，它的x-height比例通常在字号的70%左右，所以在16px字号下，x-height大概是11.2px左右。这个值是字体设计时就固定好的，不会因为你在容器里放了图片或其他元素而改变。

2. 对齐不符合预期的其他原因

你预期图片的中点和父元素基线+1/2 x-height的位置对齐，但实际结果不符，主要有两个关键原因：

• 你给.img-wrapper这个<span>设置了vertical-align: middle，而不是直接给图片设置。.img-wrapper里包含了图片和字母s，它的垂直中点是整个inline盒子的中点（包含图片高度+字母s占据的行高空间），并不是图片单独的中点，这就和你预期的对齐对象产生了偏差。
• 父元素.wrapper继承了.body的line-height: 2（也就是32px），line-height会撑开整个line box的高度。同时，不同字体的视觉中线和“基线+1/2 x-height”的规范位置并不完全重合，这也会导致视觉上的对齐效果和你的预期有差异。

内容的提问来源于stack exchange，提问作者xianshenglu