居中对齐div内的文本

Question

我需要将div中的文本垂直居中，但我遇到了问题。情况就是这样：

我在CSS中添加了一个hover属性，实际上，当鼠标移到div上时，它会改变背景，文本会在div的中心。

我希望文本也在图片中显示的第一种情况下居中（当鼠标不在div上面时）。你可以在这里找到代码的小提琴：Fiddle

.tab {
   float: left;
   margin: 0px;
   height: 50px;
   display: table-cell;
   line-height: 50px;
}

这是我用于div的代码。当鼠标结束时：

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

我在两种情况下都使用了line-height，但它仅适用于.tab:hover。有什么想法吗？

Answer 1

发生这种情况是因为您在font声明后设置了

.font_header {
   font: 19px Century Gothic, sans-serif;
   color: #EEEEEE;
}

此CSS已经过去，然后具体说明这里的声明。如果您只是更改它将起作用的顺序，因为最后一个具有更多优先级：

.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

您还需要为line-height: 50px;设置.font_header。

示例小提琴：http://jsfiddle.net/6tzwc17c/2/

Answer 3

至少在Chrome中，如果您只是拆分字体声明，它就可以工作，例如：

   font-family: Century Gothic, sans-serif;
   font-size: 19px;

而不是：

   font: 19px Century Gothic, sans-serif;