Почему текст не выровнен по центру?

Question

[DrunkMaster]

Демка https://jsfiddle.net/t4z2pud5/

HTML
<div class="test">текст</div>

CSS

.test {
    width: 200px;
    text-align: center;
    border: 1px solid #CCC;
    height: 90px;
    line-height: 90px;
}

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


Видно, что расстояние сверху чуть больше. Особенно разница становится заметной если сделать высоту блока не 90 а, например 20px. Или увеличить шрифт до 30px.
Как решить это при том, что я не знаю размер шрифта он может меняться или указан в относительных единицах.

Comments

[Moskus]

А вы "текст" не пробовали для теста написать в виде ТеКсТ и вот тогда уже заниматься измерениями?
Вообще, для более точного позиционирования текста, например - на кнопках, фиксируют не только его размер, но и высоту строки.

[DrunkMaster]

Moskus, допустим. Но какое решение для шрифта строчными буквами или цифр у которых нет заглавных букв?

[Сергей Горячев]

Moskus, ТеКсТ дает также неверные показатели, кстати)
38 пикселей сверху и 40 снизу)

[Moskus]

DrunkMaster, при том способе позиционирования, который вы выбрали, текст всегда будет сдвинут вниз, кроме случаев весьма экзотических шрифтов. Пересмотрите способ позиционирования, например, зафиксировав line-height и добиваясь нужной высоты блока padding-ами сверху и снизу.

[HealSpirit]

Moskus, css-live.ru/css/metriki-shrifta-line-height-vertic...
Неплохая статья на эту тему

[Сергей delphinpro]

С чего вы взяли, что должно быть поровну? Ознакомьтесь с тем, как устроены шрифты.

Answer 1

[Анатолий]

Чисто догадка, но border скорее всего как-то влияет на это.
line-height: 88px; (т.к. сумма border = 2)

UPD: как писали, вы забыли про заглавные буквы
клик

Comments

[DrunkMaster]

верно, лишь отчасти https://jsfiddle.net/t4z2pud5/1/