Как пофиксить line-height у сторонних шрифтов?

Question

[l2p]

Здравствуйте,
Дизайнеры очень любят использовать сторонние шрифты в кнопках. Их как-то нужно центровать. Так вот, используя line-height = height (кнопки), получается разное отображение в браузерах. Если отменить шрифт, то становится все на место. Как можно решить данную проблему?

Answer 1

[A K]

line-height: 0;
padiing: 10px 15px

Answer 2

[Евгений Петров]

В этой теме CSS: Почему происходит смещение изображения при line-height идентичной высоте блока? я уже показывал в картинке, как происходит центрирование.
Очень важным при центрировании мог бы стать font-size-adjust. Увы — его поддержка оставляет желать лучшего.

Поэтому остаются манипуляции с padding, маленьким line-height и рихтовка с помощью vertical-align в em.

Есть варианты с display вроде

display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;

или

display:table-cell;
vertical-align:middle;
line-height:1;

Comments

[l2p]

@Petroveg, методы с display мне не помогли. В мозилле все равно текст уходит вниз на пару пикселей. Проблема именно в шрифта. Мозилла почему то добавляет ему высоту сверху.

[Евгений Петров]

button::-moz-focus-inner{
	padding:0;
	border:0
}

[l2p]

@Petroveg @SelenIT2 , Никак не пойму, на обычные дивы использовать не получится?

[Евгений Петров]

На обычных дивах это и не нужно.