垂直居中文本

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来。关于

Answer 3

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

使用CSS样式display财产table和table-cell