如何在HTML中垂直对齐元素

Question

我有一个按钮，旁边有一些文字，就像这样，

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

我希望文本垂直对齐按钮的中心。我该怎么做CSS？

这是我的尝试：

http://jsbin.com/oduma4/4

我发现这种方法存在两个问题：

1. 文本显示在IE 6的顶部。
2. 这两个元素流出父div，因此这种布局会干扰其他div。

Answer 1

要将文本居中，请将 line-height 设置为与 height 相同，例如：

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

并将 vertical-align 设置为 middle ：

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

Answer 2

只要您尝试垂直对齐的元素及其所有兄弟元素为inline或inline-block，只需使用vertical-align: middle。

预览：http://jsfiddle.net/Wexcode/KceFF/