css的vertical-algin:middle出现怪异现象的解释？

Question

HTML代码：
<div class="coder">

<img src="images/code2.png" style="vertical-align:middle;">x
<span>打开微信，扫描二维码,<br>用手机观看视频</span>

</div>

css代码：
.coder{

        width: 343px;
        height: 500px;
        background: rgba(0,0,0,.2);
        padding: 10px;
    }
    .coder img{
        width: 100px;
        height: 100px;
        display: inline-block;
      
    }
    .coder span{
        display:inline-block;
        line-height:35px;
      
    }
    
    在img标签与span标签，在没设置vertical-align：middle的时候，默认是以下的样式，就是以基线对齐，我百度的资料说，基线是英文小写字母x的下面，也就是图中所示的黄线
    

当img设置vertical-align：middle的时候，是以下的样式，也就是x的中心跑到图片垂直方向的中心，按照百度的资料说，是图片的中心与文字x的中心对齐，但是为什么是x跑到图片的中心，而不是图片的垂直方向的中心跑到与x的中心对齐啊？这就是我的疑惑

当不给img设置vertical-align：middle，而给span设置vertical-align：middle的时候，又是以下的图片展示，就是文字垂直方向的中心跑到x的中心，为什么不是x的中心跑到文字的中心啊？这跟图片的对齐不是相反吗？图片设置vertical-align：middle的时候，是x移动，而文字设置vertical-align：middle的时候，是文字移动，这是什么原理啊？
w3c上给的是概念，根本不涉及这么深，而百度的博客，我浏览了，有的是太抽象看不懂，有的是没讲解到这种细节

Answer 1

首先请远离百度
然后
疑惑1：为什么是x跑到图片的中心，而不是图片的垂直方向的中心跑到与x的中心对齐啊？

答：如果是图片上移，图片就跑到div外面去了，这个图片是在正常文档流中的，显然是不可能的。img设置了middle，他后面的text和span是默认的baseline，他们的相对于img来对齐，baseline就在img的middle这里。

疑惑2：为什么不是x的中心跑到文字的中心啊？

答：vertical-align是只对行内元素自身起作用，并参考它前面与它处于同一行内块的元素来对齐。img和text都是默认的baseline,span设为middle，span的middle与它前面元素的baseline对齐。

记住一点，行级元素的对齐是需要一个参照物的，相对于它前面的元素。