垂直居中文本

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