垂直居中的文字

Question

链接到我的jsbin

我遇到了一些意想不到的麻烦。我想垂直居中“Thing2”文字。但是，css属性vertical-algin: middle似乎不起作用。

所以我想知道两件事：

1. 为什么不工作？
2. 我这样做的方式（通过向每个样式类添加一个主类）是最简单的方法吗？

注意 这只是我所拥有的整体想法的概念证明。显然，类名和ID会发生变化。

Answer 1

您无法以这种方式垂直对齐文字，请参阅http://www.w3.org/wiki/CSS/Properties/vertical-align

如果您只想垂直对齐单行文本，请尝试将容器div上的行高设置为等于div的高度。

e.g。

.metroSmall {
    line-height: 87.5px;
}

这篇文章详细介绍了垂直对齐html元素的几种不同方法：http://blog.themeforest.net/tutorials/vertical-centering-with-css/

如果您只支持最新的浏览器，您还可以使用新表和表格单元格显示样式，它们支持垂直对齐，与表格相同。

e.g。

.metroSmall {
    display: table-cell;
    vertical-align: middle;
}

请记住，这不适用于早期的浏览器，例如Internet Explorer 6。

Answer 2

我垂直居中的方法是将行高设置为容器的高度

尝试将line-height: 87.5px添加到.about

Answer 3

尝试使用此http://jsfiddle.net/YUruZ/

使用CSS样式display属性table和table-cell