How to Vertically Align Elements in HTML

I have a button and with some text next to it, like this,

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

I would like to have the text vertically aligned to the center of the button. How should I do this in CSS?

Here is my attempt:

http://jsbin.com/oduma4/4

I have found two problems with this approach:

1. The text is displayed on top in IE 6.
2. The two elements flow out of parent div so this 开发者_开发百科layout will interfere with other divs.

To center text vertically set the line-height to the same as the height, for example:

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

And set vertical-align to middle:

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

So long as the element you are trying to vertically align and all of its siblings are inline or inline-block, just use vertical-align: middle.

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