HTML/CSS выравнивание строки выше центра на несколько px. Как сделать четко посредине?

Question

[yaroslavgrishajev]

Доброго времени суток! у меня немного задротский и, скорее всего, нубский вопрос.
Есть кнопка, в которой необходимо отцентрировать надпись по вертикали. Пытаюсь это сделать несколькими способами:
1) jsfiddle.net/2nwpxubs
2) jsfiddle.net/jbynfLpy
3) jsfiddle.net/t30afcx5

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


Как добиться идеальной середины?
Заранее благодарен!

Answer 1

[YuraArt]

паддингом как во втором варианте

Comments

[YuraArt]

padding: 11px 0 13px;

[YuraArt]

ой padding: 13px 0 11px;

Answer 2

[SirMustache]

button[type='submit']
{
    font-size: 19px;
    font-weight: normal;
    line-height: 40px;

    padding: 2px 10% 0;

    text-align: center;
    text-transform: uppercase;

    color: #f29a63;
    border: #161616 solid 1px;
    background: #000;
}

Ок для Хрома и ИЕ, но на 2 пикселя ниже в Ферфоксе.

меняем
padding: 2px 10% 0;
на
padding: 0 10%;
Ок в Фаерфоксе, но на 2 пикселя выше в Хроме и ИЕ.

Answer 3

[Verzzil Verz]

Просто нужно

line-height:  "по ширине кнопки"px;
text-align: center;

А дальше свои стили.

Answer 4

[yaroslavgrishajev]

в общем, проблема была больше в том, что в разных браузерах по разному отображалась... но по факту, менял паддинги, а в ie пришлось размер шрифта поменять. думал, что есть какой-то более цивильный способ:) спасибо

Answer 5

[Юрий Лобанов]

Прибавлю к остальным ответам: Вы должны понимать, что выравниваете Вы не буквы, а кегельные площадки. Внутри них буквы могут располагаться у разных шрифтов по-разному.