摘要：默认情况下一行文本的行高分为上间距，文本的高度，下间距，并且上间距是等于下间距的，所以文字默认在这一行中是垂直居中的。
在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子：
Document
文本垂直居中原理
这样，span标签中的文字就相对于div垂直方向居中了，想要文本水平居中设置text-align：center即可。
那么，它怎么就垂直居中了？为了弄清楚它，下面我们先来看几个概念。
1. 行框在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。行框由上间距、文本高度、下间距组成，上间距的距离与下间距的距离是相等的。
默认情况下一行文本的行高分为：上间距，文本的高度，下间距，并且上间距是等于下间距的，所以文字默认在这一行中是垂直居中的。
2. 文本中的几条线几条线与行高的关系图解：
文本的行高也可以看成是基线到基线的距离。
如果一段文本的高度为16px，如果给他设置line-height的高度为200，那么相当于，文本的上下间距的高度增加了，但是文本本身的高度依然是16是不变的，并且一直默认在行框中垂直居中，而上间距和下间距平分了200px的高度并且减去文本本身的高度。所以，容器被这一行文本占满，而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。
3. Chrome浏览器的默认值谷歌浏览器字体的默认大小是：16px，字体的最小值为：12px，默认行高为：18px；默认情况下如果没有给div设置高度，那么这个div的高度会比其中文本的大小大一点（这个大多少现在没有办法确定）
4. 行高的单位px(像素)
设置起来是最直接的，同时也最方便的。
%(百分号)
如果line-height单位设置为%，那么将来在计算的时候，基数是当前标签中的文本的字体的大小。
如果是%,%之前的数据一定是整数 ：150% ，200%
em
效果跟%是一样一样的。
注意：一行em的大小相当于是当前标签中的font-size的大小。
如果是em,em之前的数据一定是：1.2em ,1.5em ,2em
不带单位
如果不涉及到继承，那么带不带单位（em）都是一样的效果，但是如果涉及到继承的话，那么就有很大的区别了：
如果单位是em，那么将来在继承的时候，我们的浏览器会先将行高对应的具体的数值计算出来以后再继承。
如果没有单位，那么将来在继承的时候，我们的浏览器会先将line-height这个属性继承给子元素，再在子元素的font-size来计算。line-height: 1.5;
5. 行高可以被继承我们知道，CSS的三大特性是继承、层叠、优先级。line-height也是可以被继承的，如下面的示例：
Document
中国人
在不给div设置行高的情况下，span标签的文字行高默认为18
接着我们给div设置一个行高等于20px
div {
line-height: 20px;
}
span {
display: inline-block;
}
我们再来看看span标签的的变化
而且，不管我们给行高设置什么单位（px、%、em、不带单位）都可以被继承。
6. 行高计算的基数如果行高的单位不是px，那么将来行高要进行计算：这个计算需要一个基数，这个基数是当前标签的字体大小，而不是浏览器默认字体大小。以上面的例子为例，我们并没有设置任何字体大小，此时我们把line-height设置为150%，那么文字行高将变为24px（16px*1.5=24）。
div {
line-height: 150%;
}
效果如下
此时我们在给div设置一个font-size等于20px：
div {
line-height: 150%;
font-size:20px;
}
那么文字行高将会变成30px，20px*1.5=30px;
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115232.html
摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。 上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏 写在前面 在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...
摘要：英语为了防止用户电脑里面，没有微软雅黑这个字体。因为绝对定位脱离标准流，影响页面的布局。一丶浮动的补充 浮动的特性: 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有字围效果 4.浮动的元素有收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题 如果盒子居中:margin: 0auto;如果盒子浮动了,margin...
摘要：定宽块状元素满足定宽和块状两个条件的元素是可以通过设置左右值为来实现居中的。设置方法改变块级元素的为类型设置为行内元素显示，然后使用来实现居中效果。 做前端这一年多来，其实一直都是偏向于js前后端，css什么的总是抱着够用就好的心态，从来没有系统的学习或总结过，结果现在的水平也一直停留在够用的阶段。感觉作为一名合格的前端工程师，不能让css成为自己的短板，于是简单的总结一下，高手绕路。...
摘要：的应用大部分时候，我们设置，都是为了垂直居中对齐。然后我们给设置，这样我们就可以重置设置的，又因为保持了内联特性，因此我们可以设置以及产生，从而实现近似垂直居中对齐。 前言 行高，顾名思义是一行文字的高度，而从规范上来说则是两行文字基线之间的距离。行高是作用在每一个行框盒子(line-box)上的，而行框盒子则是由内联盒子组成，因此，行高与内联元素可以说是非常紧密，行高直接决定了内联元...
摘要：下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系，而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见，特意添加一个的包裹着。 前言 一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟...
阅读 1253·2021-11-24 09:38
阅读 3208·2021-11-22 12:03
阅读 3981·2021-11-11 10:59
阅读 2237·2021-09-28 09:36
阅读 980·2021-09-09 09:32
阅读 3344·2021-08-05 10:00
阅读 2463·2021-07-23 15:30
阅读 2914·2019-08-30 13:12
