深入理解深入理解CSS行高行高line-height与文本垂直居中的原理与文本垂直居中的原理
本文详细介绍了CSS行高属性line-height与文本垂直居中的原理，通过本文的介绍相信对大家以后使用line-
height和设置文本垂直居中会更加熟练，有需要的可以参考借鉴。下面一起来看看。
前言前言
在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度
就可以实现文本垂直居中了，比如下面的例子：
复制代码
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
span {
line-height: 200px;
}
</style>
</head>
<body>
<div>
<span>文本垂直居中原理</span>
</div>
</body>
</html>
这样，span标签中的文字就相对于div垂直方向居中了，想要文本水平居中设置text-align：：center即可。
那么，它怎么就垂直居中了？为了弄清楚它，下面我们先来看几个概念。
1. 行框行框
在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。行框由上间距、文本高度、下间距组成，上间距的距离
与下间距的距离是相等的。
评论0