html - 在 div 中居中对齐文本

Question

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

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

我希望在图片中显示的第一种情况下文本也居中(当鼠标不在 div 上时)。您可以在此处找到带有代码的 fiddle :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