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_header 设置 line-height: 50px;。

示例 fiddle：http://jsfiddle.net/6tzwc17c/2/

Answer 2

发生这种情况是因为您在 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 3

至少在 Chrome 中，如果您只是拆分字体声明，它是有效的，例如：

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

而不是：

   font: 19px Century Gothic, sans-serif;

div 内的居中对齐文本

Center align text inside a div

html

css