У меня есть кнопка и рядом с ней текст, например,
---------------- | | | Button | Text | | ---------------- Я хотел бы, чтобы текст был вертикально выровнен по центру кнопки. Как мне это сделать в CSS?
Вот моя попытка:
http://jsbin.com/oduma4/4
Я нашел две проблемы с этим подходом:
Чтобы центрировать текст по вертикали, установите высоту линии так же, как и высоту , например:
#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/