CSS为什么行高line-height与文字高height一样就能让文字居中？ 有没有人能具体点解

Question

CSS为什么行高line-height与文字高height一样就能让文字居中？
有没有人能具体点解释line-height和height的区别？最好用图表示，求高手！

Answer 1

当一行文本，必须是一行在一个<div></div>块内部显示时，将该<div></div>块的行高设置为这个块本身的高度，就可以让内部的一行文本垂直居中。

相应的CSS代码如下：

div{

width:1000px; height:30px;

background-color:#ff5857; //该属性为背景颜色，主要是让我们能够看到块本身

line-height:30px;

}

line-height 属性的取值和 height 属性的取值是相同的，这样内部的一行文本就实现垂直居中。

在CSS中，line-height 属性的调整就是以这条线为标准线的。换句话说，当line-height属性设置为一定的数值时，段落中任意两行的行距就是这两行基线之间的距离。

扩展资料

利用精灵元素实现垂直居中的代码

代码如下：

ghost-center {

position: relative;

}

.ghost-center::before {

content: " ";

display: inline-block;

height: 100%;

width: 1%;

vertical-align: middle;

}

.ghost-center p {

display: inline-block;

vertical-align: middle;

width: 20rem;

}

Answer 2

我介绍你去看看这篇大牛的文字，详细介绍了line-height
http://www.zhangxinxu.com/wordpress/2009/11/css行高line-height的一些深入理解及应用/