如何垂直對齊元素HTML

Question

我有一個按鈕和一些文字旁邊，這樣，

---------------- 
|    | 
| Button |  Text 
|    | 
---------------- 

我想有垂直排列的按鈕的中央的文字。我應該如何在CSS中做到這一點？

這裏是我的嘗試：

http://jsbin.com/oduma4/4

我發現兩個問題的方法：

1. 的文本在IE中顯示在頂部6
2. 兩個要素流動超出父div，所以這個佈局會干擾其他div。

Answer 1

要居中文本垂直設置行高到相同高度，例如：

#form-actions{ height: 30px; } 
#text{ line-height: 30px; } 

並設置垂直對齊到中間：

#text{ line-height: 30px; vertical-align:middle; } 

Answer 2

只要你嘗試verti的元素cally對齊，其所有兄弟姐妹都是inline或inline-block，只需使用vertical-align: middle即可。

Preview：http://jsfiddle.net/Wexcode/KceFF/