垂直对齐不居中文本

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

垂直对齐不居中文本

回答

相关问题