line-height为什么能设置单行文本垂直居中对齐
2019-02-26 本文已影响0人
葶寳寳
好久没写页面的我，总结下
line-height知识点。
line-height的取值：
- 单位：
line-height: 26px，直接定义目标元素的行高为26px的高度。 - 百分比：
line-height: 150%，与自身的font-size有关，line-height值为:font-size值乘以150%。且如果其层叠子元素没有定义line-height属性，不管有没有定义font-size属性，其层叠子元素行高均为21px（与自身的font-size没有任何关系）。 - 倍数：
line-height:1.5，用该方式一般也是配合font-size属性使用，但是对层叠子元素的影响效果并不同，如果层叠子元素没有定义line-height属性，但是定义了font-size属性，那这些层叠子元素的行高为继承过来的line-height倍数值乘以自身的font-size属性。
为什么line-height能设置单行文本垂直居中对齐呢？
类似于用书写英语字母四条线格式，从上至下，依次为顶线、中线、基线和底线。line-height是行高，即行与行基线之间的距离。
line-height与font-size的计算值之差（也就是两行的“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。所以当我们设置单行文本的line-height为所需要box的高度，即可实现垂直居中对齐。
参考文章：
CSS行高（line-height）及文本垂直居中原理
css行高line-height的一些深入理解及应用
