行高與填充垂直居中單行文本

我可以垂直居中一行文本line-height，但也可以使用padding-top和padding-bottom。行高與填充垂直居中單行文本

每個的優缺點是什麼？

body { 
 
    font-size: 12px; 
 
    font-family: sans-serif; 
 
} 
 

 
div { 
 
    border: 1px solid #333; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    display: inline-block; 
 
} 
 

 
.vcenter1 { 
 
    line-height: 50px; 
 
} 
 

 
.vcenter2 { 
 
    padding-top: 19px; 
 
    padding-bottom: 19px; 
 
}

<div class="vcenter1">Lorem ipsum line-height...</div> 
 

 
<div class="vcenter2">Lorem ipsum padding...</div>

來源

2015-05-24 Kid Diamond

這聽起來有點像「告訴我的方式來垂直對齊使用CSS的東西」，這已經討論*令人作嘔*所有在互聯網上的一個話題。只需使用適合您的方式之一即可。其他的方法包括'display：flex'，'display：table-cell'，['position：relative' with'top'和'transform']]（http://zerosixthree.se/vertical-align-anything -with-只是-3-線-的-CSS /）。無論如何，這裏邀請開放式討論的問題是[off-topic]（http://stackoverflow.com/help/on-topic）。 – Tomalak

@Tomalak我只想特別瞭解這兩種情況的區別。現在，對我來說，他們似乎都做同樣的事情。恐怕有些事情我不知道我在使用任何一種方法時都沒有考慮到。 –

我們應該避免使用填充來居中內容，因爲我們永遠不會知道容器的確切高度。字體的高度在不同的瀏覽器中呈現不同。 –

對於我來說，這兩種方法都適用於文本行只保證一行一行的情況（通過固定容器寬度的屬性或通過操作內容和/或CSS屬性），但它取決於你的意圖作爲更適合於：

如果你想要的文字被包含在被固定元素的高度，然後使用line-height似乎是最合適的，可維護的，因爲更改字體的大小不會影響容器的高度（除非字體比容器高）。
然而，如果容器的高度是不固定的，它是該空白字體的兩側仍然更重要的，填充是比較合適的選擇。

當然也有一個元素內垂直居中文本的其他方面，這先前的問題How do I vertically center text with CSS?有很多關於該主題的有用信息。

來源

2015-05-24 10:39:37

純粹的垂直中心而言，重要的不是一個小額。但請注意，在第二種情況下，您正在填充高度與字體大小成比例的線框。不同的瀏覽器在默認情況下使用的比例稍有不同，因此在不同的瀏覽器中，邊框會有不同的大小。這在第一種情況下不會發生。

來源

2015-05-24 10:29:56 Alohci

行高與填充垂直居中單行文本

回答

相關問題