带有图像的内联框 vertical-align:middle with parent box

Question

请运行演示：

* {
  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;
}

<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>

重点是我设置

.body .img-wrapper {
      vertical-align:middle;
}

我原以为下图中的红线在同一行：

根据 specification,

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

所以，我认为：

方框的垂直中点为上图中第一条红线并且
父框的基线加上父框x-height的一半=第二条红线

但事实证明我错了，我猜关键是父x-height。所以，我发现了这个：

所以，我认为x-height of parent在这种情况下不是第二条红线，因为图像的存在。

那么，我的问题是：

在这种情况下，父项的 x 高度是多少？是不是因为图像的存在而改变了？
或者其他问题？

请注意：

在这种情况下我只想得到x-height值，这样我可以更好地理解vertical-align。
我不要求具体的解决方案。

谢谢你的帮助！

Answer 1

首先，元素的 x-height 不受图像影响，仅由 font-size 定义，当然还使用了 font-family。然后为了获得 x-height 的值，您需要考虑 ex 单位。

这是为 this answer

拍摄的更好的插图

您可能会清楚地看到垂直对齐的每个值之间的差异，并且还会注意到 em 和 ex 单位的图示。现在为了获得 x-height 的精确值，您只需使用 ex 单位。

这是一个例子：

* {
  margin:0;
  padding:0;
}
body {
  font-family:Microsoft Yahei;
  font-size:16px;
  background-color:lightblue;
  line-height:2;
}
span {
  background-color:pink;  
  border-right:1ex solid red;
  border-left:1em solid red; 
}
img {
  width:50px;
  height:50px;
}

<span>
    words-g words-g words-g
</span>
<br>
<span>
    words-g words-g words-g <img src="https://avatars3.githubusercontent.com/u/23273077" alt="">
</span>

如您所见，我使用 ex 和 em 单位添加了左右边框，然后如果我检查计算值，我可以获得准确的值。您还会注意到两个 span 具有相同的值，表明图像对其没有影响。

带有图像的内联框 vertical-align:middle with parent box

inline-box with image vertical-align:middle with parent box

html

css

vertical-alignment