Не работает line-height, почему?

Question

[Web Lizard]

Господа, столкнулся с загадочной ситуацией.

Есть сайт. У него есть блоки сделанные таким образом:

Есть .item, в котором лежит span. У .item есть line-height, за счет которого span центруется по вертикали:

Здесь все прекрасно, все работает.

Но переходим на продакшн, видим ТОЧНО ТАКОЙ ЖЕ css, только на нем по какой то неизвестной мне причине попросту не работает line-height в результате чего верстка едет.


Бьюсь уже 3 часа над этой проблемой и не могу понять в чем дело! Прошу помощи!

UPD:
Сделал на jsfiddle пример с такой штукой, и оно там прекрасно работает! https://jsfiddle.net/ta6fmt85/3/
Но почему блин на сайте тоже самое не работает - загадка.

Comments

[Андрей Хохлов]

Дайте ссылку

[Web Lizard]

Андрей Хохлов: присылаю скриншотом чтобы ссылка не проиндексировалась: joxi.ru/V2VBlDYI03zep2

Answer 1

[Web Lizard]

Короче решил проблему. Проблема была в том что DOCTYPE html не был выведен в первую очередь, вместо него сначала шли php-шные echo со всякой шнягой.

Answer 2

[Sergiu Mitu]

item у вас скорее всего центрируется не из за line-height а из за vertical-align: middle;
а значит нужно проблему искать в родителях

Comments

[Web Lizard]

Центруется то из-за vertical-align: middle, но сама высота блоков задается через line-height, вот в этом примере более наглядно видно как оно работает: https://jsfiddle.net/ta6fmt85/3/

Answer 3

[Андрей Верх]

По скринам конечно то ещё" удовольствие" код изучать.

В чём дело точно не скажу, но выравнивать одним лишь line-height'ом, это как-то не правильно... должна быть ещё и высота. Попробуйте её задать, а ещё лучше, сделайте выравнивание другим способом, т.к. при подходе с line-height, текст в несколько строк не будет корректно работать.

Comments

[Web Lizard]

Понимаю что по скринам это делать сложно, но я же не буду весь код целиком сюда копировать.

По поводу высоты - но в локалке то без высоты шикарно работает..

[Андрей Верх]

Web Lizard: Если вы хотите понять почему у вас локально всё работает, а на хосте нет, то по скринам в этом вряд ли кто-то в этом разберётся.

Возможно дело в кастомном шрифте. Попробуйте его отключить и проверить.

[Web Lizard]

Андрей Верх: вот, смотрите, сделал вот такую штуку https://jsfiddle.net/ta6fmt85/3/ . Если убрать line-height то оно начинает работать криво. Но у меня то проблема в том что оно по идее работать то должно, и вы сами видите что оно работает, но оно не работает! Вот и в чем дело вообще?