美文网首页
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的一些深入理解及应用

相关文章

  • 常用到的水平垂直居中样式布局

    水平对齐+行高 【思路一】text-align + line-height实现单行文本水平垂直居中 水平+垂直对齐...

  • CSS面试题(一)

    一、垂直居中,多行文本垂直居中? 1、单行文本垂直居中设置高度height和行高line-height,使高度he...

  • 前端基础(问答3)

    keywords : line-height, 垂直居中,单行文本两端对齐,inline-block,visibi...

  • 2016-12-19

    多行文本垂直居中 单行文本居中方式:line-height但是多行文本使用 line-height 的话会出错,就...

  • 关于文本居中/背景/边框

    文本布局 单行文本垂直居中使用 line-height = height 使用定位来垂直居中demo如果元素wid...

  • CSS居中,css文本截字,超出文本省略号显示

    一、文本居中 1、横向居中 text-aline:center; 2、单行文本垂直居中 line-height:h...

  • 前端中的居中问题

    一、文本居中 文本水平居中: text-align:center 文本垂直居中:(1)设置line-height=...

  • CSS垂直居中

    CSS垂直居中的方法总结: 1.利用padding垂直居中(line-height用于单行文本居中) **不需要设...

  • CSS布局--水平&垂直对齐

    设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文...

  • CSS居中的多种方式

    CSS实现『垂直居中』的方式 一. 单行文本垂直居中 1️⃣. 使line-height的值等于height的值...

网友评论

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

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