文本垂直居中

Question

链接到我的 jsbin

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

所以我想知道两件事：

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

注意 这只是我总体想法的概念证明。显然类名和 ID 会改变。

Answer 1

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

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

例如，

.metroSmall {
    line-height: 87.5px;
}

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

如果您只支持最新的浏览器，您还可以使用新的表格和表格单元格显示样式，它们支持垂直对齐在同一个就像桌子一样。

例如，

.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