如何在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; }

并将vertical-align设置为middle:

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