因为图片往下移了，与他的父元素（文字也在父元素里面）垂直居中

但他往下移了些距离  上面就有空隙    于是图片和文字又同时往上移相同的距离 

最终造成 视觉上图片没动，文字上移

看css手册：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”这个很绕，打个比喻：假设有两个行内元素a和 b，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置

然而我用了之后，旁边文字并没有居中。。。我丢不知道怎么办了

你把它想成黏在一起的  然后用隔壁的坍塌影响另外一个

都是行级元素，就像一行文字以文字顶部对齐一样