Вертикальное выравнивание текста в кнопках

В данной статье рассмотрим вертикальное выравнивание текста в кнопках. Обычно сталкиваешься с этим в кнопках на при оформленных ссылок или пунктов меню. Чаще всего в готовой верстке встречаю самое простое решение с помощью CSS одного свойства padding. Задали поля сверху и снизу, и готово. Я сам так делал. Но это далеко не лучший способ. Не всегда удобно. Поэтому я стал пользоваться, как на мое мнение, более универсальным способом.

Пример CSS выглядит так:

height: 30px;
line-height: 30px;
display: inline-block;
text-align: center;
text-transform: uppercase;
vertical-align: middle;

Значения высоты блока и высоты строки должны быть одинаковые. Единственное замечание, что буквы должны быть в верхнем регистре. В нижнем регистре они не четко вертикально по центру. И непосредственно сам наглядный пример:

кнопка

Share: