试着了解线路的高度和填充和高度

Question

所有关系：

我非常新的CSS，任何人都可以给一点简单的解释的line-height /填充/高度如何一起工作的？

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

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

感谢

Answer 1

如果你看一看的box model，应该清楚很容易：高度属性定义的内容高度，填充将添加内容周围空间（但在对象内），因此，高+填充顶部+填充底部等于您的总元素高度（不包括边框）。

行高只是简单地定义了一行文本应该占据多少垂直空间。文本只会在内容区域中呈现，因此您设置填充的内容与使用行高进行垂直居中无关。

这意味着所有你需要做的就是设置你的line-height等于你的元素的高度，实现文字的垂直居中（这仅适用于非文字换行，且仅当您的字体ISN的12磅大于60px）。 在你的榜样，你必须设置：

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

水平居中无关与该声明 - 所有你该做的是使用：

text-align: center; 

Answer 2

行高定义下面一条线与另一条线之间的垂直空间。

越高越高的垂直空间弯曲每个行之间的div。

如果你想使文字水平居中，你把这个在您的DIV：

text-align: center; 

要使其垂直居中，你把这个在您的DIV：

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