無法垂直對齊容器內的文本

我正在嘗試使用line-height在幾個容器中垂直對齊文本，但它不起作用。我以前從來沒有遇到任何問題，但由於某種原因，現在它不能正確排列。無法垂直對齊容器內的文本

現在，我大概是從所有編碼只是盲目的，但我似乎無法找到問題所在......

這是我的HTML看起來像：

<div class="formLabel"> 
    <div class="labelNumber">D</div> 
    <div class="labelTitle"> 
     <h2>New Password</h2> 
     <p>Check Help for character and length restrictions</p> 
    </div> 
</div>

，這是我的CSS看起來像：

.formLabel 
{ 
    position: relative; 
    width: 400px; 
    height: 40px; 
    padding: 20px 0px 0px 10px; 
    margin: 0; 
} 

.labelNumber 
{ 
    float: left; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    background: #191919; 
    font: bold 18px Arial; 
    color: #555555; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
}

它在.labelNumber容器，我試圖以垂直對齊的字符。

來源

2012-07-06 Tom

line-height屬性是速記font語法的一部分，所以將line-height放在它之後或將其集成到font屬性中。

.labelNumber { 
    float: left; 
    width: 30px; 
    height: 30px; 
    background: #191919; 
    font: bold 18px/30px Arial; /** Font-size/Line-height */ 
    color: #fff; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
}

基本上，font屬性覆蓋了行高。

來源

2012-07-06 23:03:49

哦，我的上帝，不敢相信我沒有抓住那個..非常感謝你！ :) – Tom 2012-07-06 23:06:34

也有'！重要的'規則，但湯姆有正確的想法。 – David 2012-07-06 23:11:18

+'d，打我吧:) – Zuul 2012-07-06 23:16:56

與您現有的代碼的問題是，你的CSS聲明的順序迫使瀏覽器有關line-height: 30px;聲明給忘了，因爲之後你使用font短手語法font: bold 18px Arial;。

你能解決您的問題有兩個選項之一：

移動line-height: 30px;到font: bold 18px Arial;後：

看到這個working Fiddle實例。

.labelNumber { 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    background: #191919; 
    font: bold 18px Arial; 
    line-height: 30px; 
    color: #555555; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
}

鬆散的line-height: 30px;並更新font短手font: bold 18px/30px Arial;：

參見本實施例working Fiddle。

.labelNumber { 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    background: #191919; 
    font: bold 18px/30px Arial; 
    color: #555555; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
}

您可以閱讀有關font短手語法here。

附註：爲了減少代碼，第二個選項是首選。

來源

2012-07-06 23:13:22 Zuul

無法垂直對齊容器內的文本

回答

相關問題