Q:

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:

The text is displayed on top in IE 6.
The two elements flow out of parent div so this layout will interfere with other divs.

A:

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; }

