html - 垂直对齐不使文本居中

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在此处使用属性在元素中间垂直对齐

演示

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