Center align text inside a div - html

Question

I need to center vertically the text inside a div but I am having a problem. This is the situation:
There is an hover attribute that I added in the CSS and in fact, when the mouse goes on the div, it changes the background and the text goes at the center of the div.
I would like the text to be centered also in the first case shown in the picture (when the mouse in not over the div). You can find the fiddle with the code here: Fiddle
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
This is the code that I have used for the div. And when the mouse goes over:
.tab:hover {
cursor: pointer;
box-shadow: inset 0 0 10px #999;
-moz-box-shadow: inset 0 0 10px #999;
-webkit-box-shadow: inset 0 0 10px #999;
background-color: #555;
line-height: 50px;
}
I have used the line-height in both cases but it works only in .tab:hover. Any idea?

Answer 1

That happens because you are setting after a declaration for the font:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
This CSS is after and then the specificity goes with the declaration here. If you just change the order it will work, since the last has more precedence:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
UpdatedFiddle

Answer 2

You need to set the line-height: 50px; for .font_header as well.
Example fiddle: http://jsfiddle.net/6tzwc17c/2/

Answer 3

At least in Chrome it works if you just split the font declaration, like:
font-family: Century Gothic, sans-serif;
font-size: 19px;
Instead of:
font: 19px Century Gothic, sans-serif;