我们知道设置line-height可以让文字居中,但是很少人知道其原理。俗话说,了解真相才能获得真正自由,我们只有了解原理,用的时候才能得心应手。
1.先了解行高中的几个基本概念
- 行高:两行文字中基线与基线之间的距离
- 行距:底线距离顶线的距离
- 一行文本所占的总高度 = 文本高度 + 行距(文本高度是不变的,上行距和下行距高度是相等的)
- 行高 = 一行文本所占的总高度(这个结论是推出来的,直接记住就可以了)
本质上我们设置行高就是设置一行文本所占的总高度,而文本高度是不变的,所以,设置的就是上下行距的高度 - 文本高度,而上下行距的高度是相等的,最终呈现的效果就是文本居中