line-height垂直居中的原理

我们知道,当一个div的高度是40px的时候,设置其line-height为40px,就能实现文字的垂直居中,这是为什么呢?

行高,也就line-height的组成部分有三部分组成,文字大小,上间隙,下间隙。

如果元素的高是40px,文字大小为20px,那么他的上间隙和下间隙加起来就是40-20=20px. 平均一下就是,上间隙和下间隙分别为10px. 从而实现了上下垂直居中。

因此,如果元素高度大于line-height,比如元素高度为40px,line-heihgt为30px的时候,文字就会偏上。反之,文字就会偏下。

line-height垂直居中的原理

line-height垂直居中的原理

上一篇:使用Retrofit进行网络请求


下一篇:LeetCode-023-合并K个升序链表