垂直對齊不居中文本

我有以下的CSS：垂直對齊不居中文本

#header-notification 
{ 
    color: #7B6F60; 
    font-size: 13px; 
    font-weight: bold; 
    float: left; 
    text-align: center; 
    vertical-align: middle; 

    height: 20px; 
    width: 20px; 
    background-color: #E5E5E5; 
}

，並宣佈標籤爲：

<label id="header-notification"></label>

但是這樣做讓我下面的：

enter image description here

正如你可以看到這裏的文本不是垂直居中。我究竟做錯了什麼？

來源

2013-07-25 adit

相信'垂直align'用於圖像和或輸入。它對簡單的文本元素沒有影響 – Novocaine

嘗試添加display: table-cell的元素：

#header-notification 
{ 
    display: table-cell; 
    color: #7B6F60; 
    font-size: 13px; 
    font-weight: bold; 
    float: left; 
    text-align: center; 
    vertical-align: middle; 
    height: 20px; 
    width: 20px; 
    background-color: #E5E5E5; 
}

來源

2013-07-25 12:36:44 maximkou

'vertical-align：'*「適用於：內聯級別和」表格單元格「元素*，請參閱http://www.w3.org/TR/ CSS2/visudet.html＃propdef-vertical-align – Zeta

謝謝，@Zeta。你是對的。 – maximkou

當你使用的是單個字符垂直對齊，您可以在這裏使用line-height屬性的元素的中間垂直對齊

Demo

#header-notification { 
    color: #7B6F60; 
    font-size: 13px; 
    font-weight: bold; 
    float: left; 
    text-align: center; 
    vertical-align: middle; 
    height: 20px; 
    width: 20px; 
    background-color: #E5E5E5; 
    line-height: 20px; 
}

對於製作vertical-align: middle;的工作，您需要使用display: table-cell;，這樣它就可以垂直對齊中間位置......但是您不需要這裏，因爲我指定了您正在嘗試對齊單個字符。當您想要在一個元素內垂直對齊整個段落或圖像時，通常會使用display: table-cell;方法。

來源

2013-07-25 12:38:11

'vertical-align：center'？你的意思是'文字對齊：中心'還是'垂直對齊：中間'？ – Zeta

@Zeta感謝您指出，我現在需要一些睡眠o_0 –

給這個自旋：http://jsfiddle.net/jplahn/7zwUc/

你需要把它放在一個父DIV中。（如果你想使用垂直對齊，顯然還有其他方法可以做到這一點）。

HTML：

<div id="header-notification"> 
    <label id="number">0</label> 
<div>

CSS：

#header-notification 
{ 
    color: #7B6F60; 
    font-size: 13px; 
    font-weight: bold; 
    float: left; 
    text-align: center; 

    height: 20px; 
    width: 20px; 
    background-color: #E5E5E5; 
} 

#number { 
    vertical-align: middle; 
}

來源

2013-07-25 12:38:50

垂直對齊不居中文本

回答

相關問題