关于图片与文字垂直居中的问题

Question

首先，span img同为行内元素，在父元素设置text-align: center; line-height = height后就可以实现子元素span中的文字水平垂直居中，但是img需要加上vertical-align: middle才能实现垂直水平居中，请问原因是什么呢？

Answer 1

<img>并非单纯的行内元素，它叫行内替换元素，它也无法转化成行内元素。父元素的line-height属性对它并不起作用。你看到span居中是整个span元素相对于父元素的居中，而不是里面的文字。