css vertical-align 属性值为middle

Question

属性的描述：vertical-align:middle：元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。

疑惑：这个属性值想要描述的到底是什么？元素的中垂点对齐父元素（基线+1/2字母'x'）的高度？

实验代码
1.html部分：

<div class="box1">
    xph
    <img src="img/880374243715778.jpg" />
    <span>span</span>
</div>
<div class="box2"></div>

2.css部分

.box1{background-color:pink;}
.box2{
    border-bottom: 1px solid blue;
    position:absolute;
    top:44px;
    width:100%;
}

结果：

蓝色的线的图片（90*90）的中垂点，这个结果和基线+1/2的字母'x'有什么关系啊？（头有点痛，先去洗澡了）

看过的博客：http://www.zhangxinxu.com/wor...

Answer 1

这样写理解了没？

Answer 2

昨天看了几篇博客，文中写道：

baseline和middle line的高度之差为'x' 字符高度的一半

所以vertical-align:middle 的大白话就是元素的中垂点对齐父元素的中线？