vertical-align的一些问题

Question

给文字设置居中的话字会微微往下沉一下

给图片设置居中怎么又把字提起来啦？

Answer 1

上图是display为inline的元素的四线分布图。

css中的对齐方式，默认是基线对准，你把span设置为居中，就是设置span的中线与其他元素的基线相对齐，所以下沉。当设置图片居中时，就是把图片的中线与字体的基线相对齐

Answer 2

这里你需要理解基线，中线的概念了。

也就是hfhan提供的这张图：

1、你把span设置为middle 他会把自己的中线和旁边的Why或者图片的基线对齐，所以微微下沉

2、把图片设置为middle 图片会把自己的中线和旁边的字的基线对齐，所以图片上升了

Answer 3

你没有设置vertical-align的时候 行内元素默认都是基线对齐 即元素的基线对齐父元素的基线 图片也是行内元素 可以把他想象成一个200px的文字 你给图片设置middle的时候 图片把他的中线跟父元素的基线对齐 而其他的文字还是把自己的基线跟父元素的基线对齐 其实是把图片的位置往下移了 只是最终的结果看起来是其他文字被往上提了