首页 > 其他 > 详细

line-height垂直居中的原理

时间:2021-06-28 09:41:13      阅读:20      评论:0      收藏:0      [点我收藏+]

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

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

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

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

技术分享图片

line-height垂直居中的原理

原文:https://www.cnblogs.com/qingshanyici/p/14942594.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!