試着瞭解線路的高度和填充和高度

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%);