Какой вариант выравнивания текста по вертикали в кнопке вы используете?

Question

[Думай Головой]

Всем привет!

Навскидку:
1) Line-height
2) Padding
3) Псевдоэлемент :before растянутый по высоте кнопки с inline-block и valign: middle
4) Картинка

Какой лучше/правильнее/моднее/best-practices в общем?

Answer 1

[Денис Инешин]

height:
jsfiddle.net/bxpmk17p

Comments

[Думай Головой]

Денис Инешин это такая магия тега button?

[Денис Инешин]

Думай Головой: да

[Думай Головой]

Денис Инешин вот что значит семантика: и красиво, и кода меньше

[Денис Инешин]

Думай Головой: ага)

[Therapyx]

А зачем инлаин блок? )

[Думай Головой]

Денис Инешин кстати печально, но иногда приходится использовать тег a для кнопок, так как только в нём можно писать href

[Денис Инешин]

Therapyx: Привычка)

[Сергей Андреев]

вообще это плохая кнопка если надо будет в 2 строки

Answer 2

[Moskus]

Добавлю особый случай.
Если кнопка мала по высоте относительно высоты шрифта (близка к расстоянию между верхней точкой заглавных букв и нижней точкой букв с элементами ниже базовой линии), всегда использую line-height, так как его все равно придется использовать, чтобы не дать тексту в разных browser-ах (или при отсутствии используемого шрифта) распереть кнопку по вертикали.
Этот же метод использую, когда нужно стилизовать какое-нибудь меню на готовом сайте, которое уже сделано через ссылки, когда в HTML вмешиваться - лишнее телодвижение.