vertical-align doesn't center the text - html

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