垂直对齐不会使文本居中

Question

I have the following 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;
}

and declared the label as:

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

However doing so gives me the following:

As you can see the text here is not vertically centered. What am I doing wrong?

Answer 1

As you are using a single character to align it vertically, you can use line-height property here to vertically align in the middle of the element

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

For making vertical-align: middle; work, you need to use display: table-cell; so that it will align middle vertically.. but you won't need that here as I specified that you are trying to align a single character. display: table-cell; method is generally used when you want to align an entire paragraph or an image vertically inside an element.

Answer 2

Give this a spin: http://jsfiddle.net/jplahn/7zwUc/

You need to place it inside a parent div. (If you want to use vertical-align on it. Obviously there's other ways to do it).

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

Try to add display: table-cell for element:

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