html - 图像垂直对齐的内联框 :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 具有相同的值，这表明图像对其没有影响。