究竟vertical-align:middle的依据在哪里
Demo预览：
https://sunzsh.github.io/html-demos/font-v-middle.html
代码 / 文件：
https://github.com/sunzsh/st-html-demo/blob/master/font-v-middle.html
大家看啊
这行文字默认是baseline对齐的
也就是说这条线对齐
但是呢如果我给中间这个test
加一个vertical-align
等于middle
也就是说我
让这个test垂直居中对齐
它就会下沉
这是为什么呢
我们来看一下vertical-align
等于middle的这个解释哈
他说啊
会让这个元素的中间和谁对齐呢
和父元素的baseline
加上一半的x-height
什么意思呢
我们来看x-height就是这个高度
他所谓的x-height其实跟这个a、c、e ...
e啊这些字母高度是一致的
但是我们用x比较容易取中间的位置
他说取一半的x-height
我呀找了一个画图工具
我们在这里给大家演示一下
我们先来画一条baseline
baseline是在这里
好然后呢我们再往上加一半的x-height
就是加到差不多这个位置
换一个颜色
好这时候
如果我们来设置它的varticle-align:middle
意味着让这个元素的中间
注意这个元素的中间在哪
在这个小方块这
和这个蓝线对齐
所以他要往下沉
大家看差不多沉到这个位置
才能跟这个蓝线对齐
好所以这就不难理解
为什么视频开始的时候
给这个test加一个vertical-align:middle
它就会下沉了
大家记住这个结论
咱们下一期 一起分析一个bug
最后更新于
这有帮助吗？