Как вертикально выравнивать элементы в HTML

У меня есть кнопка и рядом с ней текст, например,

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

Я хотел бы, чтобы текст был вертикально выровнен по центру кнопки. Как мне это сделать в CSS?

Вот моя попытка:

http://jsbin.com/oduma4/4

Я нашел две проблемы с этим подходом:

  1. Текст отображается сверху в IE 6.
  2. Эти два элемента выходят из родительского div, поэтому этот макет будет мешать другим div.

Чтобы центрировать текст по вертикали, установите высоту линии так же, как и высоту , например:

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

И установите вертикальное выравнивание в среднее :

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

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

Предварительный просмотр: http://jsfiddle.net/Wexcode/KceFF/