Как вертикальное выравнивание элементов в 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

Пока элемент, который вы пытаетесь перевернуть cally align и все его братья и сестры: inline или inline-block, просто используйте vertical-align: middle.

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