img,
span,
body {
display: inline-block;
font-family: Arial;
padding: 0px;
margin: 0px;
vertical-align: middle;
}
img {
vertical-align: middle;
}
span {
background-color: blue;
font-size: 36px;
}<body>
<img src="https://placehold.co/200" />
<span>Sample Text</span>
</body>我很抱歉问这个秘密知识，我的帐户已经因为问这个而被CIA删除了3次，但这不会阻止我。
vertical-align:middle"middle - 将元素的中间与基线加上父级 x 高度的一半对齐。 "
据此，在我的代码中，图像样式中的“vertical-align: middle”含义如下：
父级 x 高度的一半 (20px / 2 = 10px)
加号（+）
100 px（图像的垂直中点）
等于 (=)
110 像素。
我说得对吗？
但它不是这样工作的：
这是图像证明，您也可以运行代码片段并亲自查看。实际上它是 104 像素偏移，而不是 110 像素！
这究竟是怎么回事？
它正在做它应该做的事情。您正在测量子跨度的 x 高度，这是不正确的。绘制的基线也不正确，因为它应该是父级的基线，而不是跨度。
“middle - 将元素的中间与基线加上 parent 的 x 高度的一半对齐。”
如下所示，我添加了一个额外的小写“x”来显示父级的基线，其中您可以看到红线位于“x”的中间，这是parent加上的基线parent 的 x 高度的一半。
img,
span,
body {
display: inline-block;
font-family: Arial;
padding: 0px;
margin: 0px;
vertical-align: middle;
}
img {
vertical-align: middle;
}
span {
background-color: blue;
font-size: 36px;
}
/*Below are just for demo purpose, and won't affect the result*/
body {
position: relative;
text-wrap: nowrap;
::after {
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: red;
top: 50%;
left: 0;
}
}x
<img src="https://placehold.co/200" />
<span>Sample Text</span>