Question

所有

我对CSS很新，有没有人可以简单解释一下行高/填充/高度如何协同工作？

例如：如果我想用height:60px; padding:5px; font-size:12px;定义DIV，那么我应该使用line-height来使文本对齐中心既垂直又水平，我应该使用60-10或60或别的什么，为什么？

＆＃13;

<div style="background-color:lightblue;height:60px; font-size:22px; padding:5px; line-height:60px;">
    test line-height
</div>

＆＃13;

由于

Answer 1

如果你看一下box model，它应该很容易清楚：height属性定义内容高度，padding将在内容周围添加空间（但在对象内），以便高度+填充顶部+ padding-bottom等于你的元素总高度（不计边框）。

line-height简单地定义了单行文本应占用多少垂直空间。文本只会在内容区域中呈现，因此您将填充设置为与行高垂直居中并不重要。

这意味着你要做的就是设置你的行高等于你的元素的高度来实现文本的垂直居中（这只适用于非包装文本，并且仅适用于12pt你的字体大于60px）。在您的示例中，您必须设置：

height: 60px;
line-height: 60px;

水平居中与这两种声明无关 - 您只需要使用：

text-align: center;

Answer 2

line-height定义了下面一行到另一行之间的垂直空间。

越高，该div中每行之间的垂直空间越大。

如果你想让文字水平居中，你可以把它放在你的DIV中：

text-align: center;

要使其垂直居中，请将其放入DIV：

position: absolute;
top: 50%;
transform: translateY(-50%);