美文网首页
line-height与垂直居中

line-height与垂直居中

作者: 草鞋弟 | 来源:发表于2017-05-10 20:18 被阅读0次

css中行高到底指的是什么了?

line-height称之为行高,顾名思义是指行的高度,目前的主流说法是指两行文本之间基线之间的垂直距离,line-height实际距离指两个半行间距(上一行文本底线与下一行文本的顶线之间垂直距离的二分之一)加上字体本身高度。

也有人并不赞同上述说法(他认为行高并非指的是两行文本之间基线的距离),对于行高 的解释有自己的一套解释方法,

  • 可以看看这位作者是怎么认为的
    该作者认为line-height即是两个leading(line-height与font-height的高度差的二分之一)加上字体高度(他称之为content area 即内容区的高度),之所以文本默认在行框中显示为居中状态,上下有间隙,是因为浏览器默认给line-height设置有高度,一旦给文本设置有高度,那么相当于在文字上下添加了两个高度相等的leading,这样就出现了浏览器文字的默认效果,即文字在单行文本中居中,而且上下有间隙。

引申一下inline-box模型的概念

line-box模型大致有这么几个概念,line-box(行框),当一行行内元素(inline-element)处在同一行时,这一行会生成一个line-box,当然这个盒子你是看不到的,也无法通过css来控制显现出来,而对于每个行内元素会生成一个inline-box(内联盒/行内框),这个行内框的高度实质上就是line-height,而line-box的高度可以视为是由最高的那个inline-box所撑开的,因此对于一个line-box而言其高度就是其内部inlne-box的最大line-height。

由上述我们得出一个结论:

line-height与垂直居中问题

一些相关的论述,有时间再进行深入的研究

参考文章

相关文章

  • 如何垂直居中一个元素

    单行内联元素垂直居中 利用line-height与height相同即可 多行内联元素垂直居中 利用flex布局利用...

  • 定义垂直居中五种方法

    单行文字垂直居中:line-height等于height; 块级元素垂直居中:position定位,flex布局,...

  • 单行文字在安卓下不能垂直居中

    问题:height 与line-height 组合实现单行文字垂直居中,在Android下总是不居中问题 场景: ...

  • CSS面试题(一)

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

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

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

  • CSS垂直居中

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

  • 文本样式

    行高与字体简写 line-height = height,可设置单行文字垂直居中line-height默认值1.3...

  • 文字垂直居中

    文字垂直居中尽量用padding 少用line-height

  • html css居中

    1.垂直居中(方法一) 总结: line-height 设置垂直居中行高,指代文本中,行与行之间的基线间的距离。L...

  • 前端中的居中问题

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

网友评论

      本文标题:line-height与垂直居中

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