Question

我试图了解CSS中的line-height属性是如何工作的。我知道它设置了文本行之间的间距。我不明白的原因是，当你将line-height设置为与容器的高度相同时，它会垂直对齐文本。例如，如果您这样做：

.btn {
height: 22px;
line-height: 22px;
}

使用“btn”类创建一个元素，该元素中的文本将垂直对齐中心，我不明白为什么。对我来说，第一行文本出现在容器的最顶部更有意义，第二行出现在底部，可能会溢出，因为这将是22px向下。有人可以告诉我它为什么会这样工作，因为除非对此进行解释，否则我觉得我无法完全理解行高属性。谢谢。

Answer 1

线高是元素上方和下方的空间量。这就是我能告诉你的全部内容。

Answer 2

如果你将文本包装在一个div中，给div一个高度，然后文本增长为2行（也许是因为它在像手机一样的小屏幕上观看），那么文本将与下面的元素重叠它。另一方面，如果你给div一个行高，文本增长到2行，div就会扩展（假设你也不给div一个高度）。

以下是展示此内容的link

.shorty
{
    height: 12px;
}

.liney
{
    line-height: 25px;
}

Answer 3

线高实际上是指短语之间的顶部和底部垂直间距。设置与行高相同的高度的原因是它将自动集中无效空格。使用 margin {auto 0}

分享类似的解释以集中身体

它帮助我更好地理解CSS3语法和属性。我希望我的分享可以帮助你。 :)

编辑：我恰好在这里找到了更好的答案：How do I vertically center text with CSS?