vertical-align不会使文本居中

Question

我有以下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>

但这样做会给我以下内容：

正如您所看到的，此处的文字不是垂直居中的。我做错了什么？

Answer 1

当您使用单个字符垂直对齐时，可以在此处使用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;方法。

Answer 2

给它一个旋转：http://jsfiddle.net/jplahn/7zwUc/

您需要将其放在父div中。 （如果你想在它上面使用vertical-align。显然还有其他方法可以做到。）

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;
}

Answer 3

尝试为元素添加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;
}