Почему на телефонах line-height работает не так как на пк?

Question

[Никита Нафранец]

Как правильно централизовать внутри блока с помощью line-height и vertical-align: middle?
codepen.io/dimensi/pen/NAVmXo
Такой пример хорошо работает на компе, но на телефоне, .icon чуть выше центра.

Comments

[DTX]

У меня всё норм. iOS

[Никита Нафранец]

DTX: ну я говорю за android lolipop 5 это точно

[DTX]

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

Answer 1

[xmoonlight]

Возможно, нужно:
1. сбросить стили
2. указать шрифт и его параметры в явном виде
https://css-tricks.com/centering-css-complete-guide/
codepen.io/chriscoyier/pen/HiydJ

Comments

[Никита Нафранец]

Я вам пример скинул, почти стилей нет, куда еще сильней сбрасывать? На кого?

[xmoonlight]

Никита Нафранец: стили по-умолчанию - у всех браузеров/устройств - разные. поэтому их сбрасывают вначале, например через https://htmlacademy.ru/blog/64-about-normalize-css

[Никита Нафранец]

xmoonlight: я normalize по умолчанию юзаю, я просто забыл, что кто-то может его не юзать.

[xmoonlight]

Никита Нафранец: тогда остаётся пробовать п.2

[Никита Нафранец]

xmoonlight: а шрифт кому задавать? У иконки задан шрифт виде fontAwesome

[xmoonlight]

Никита Нафранец: режим совместимости html-стандарта указан? www.w3schools.com/tags/tag_doctype.asp Иногда из-за него чуть сдвигаются элементы.

[Никита Нафранец]

да

[xmoonlight]

Никита Нафранец: добавил в ответ

Answer 2

[gleendo]

Используйте свойства по назначению. Для центрирования чего угодно лучше использовать flexbox.
https://jsfiddle.net/evg_/w1fsm5n2/1/

Comments

[Никита Нафранец]

Да, я на флексбоксе и сижу, просто раньше такого неприятного бага, я не замечал, а теперь вижу. Про способ с помощью line-height, прочитал на хабре, но через гугл нашел только такой источник.
shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikal...