美文网首页
line-height为什么能设置单行文本垂直居中对齐

line-height为什么能设置单行文本垂直居中对齐

作者: 葶寳寳 | 来源:发表于2019-02-26 12:16 被阅读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-heightfont-size的计算值之差(也就是两行的“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。所以当我们设置单行文本的line-height为所需要box的高度,即可实现垂直居中对齐。

    参考文章:
    CSS行高(line-height)及文本垂直居中原理
    css行高line-height的一些深入理解及应用

    相关文章

      网友评论

          本文标题:line-height为什么能设置单行文本垂直居中对齐

          本文链接:https://www.haomeiwen.com/subject/dvuxbxtx.html