• 0
Arinden

Кроссбраузерность line-height или как правильно центровать текст по вертикали

Вопрос

Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода:

HTML:

<div class="lineHeight">
  HELLO // line-height method
</div>
<div class="padding">
  HELLO // padding method
</div>

CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

div {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  height: 100px;
  background: lightgreen;
  margin: 5px;
  padding-left: 10px;
  box-sizing: border-box;
}

.lineHeight {
  line-height: 100px;
}

.padding {
  padding-top: 42px; /* (100px - 14px) / 2 - 1px */
}

Ситуация следующая:

В случаях с line-height и padding текст ровно по центру, отступы по 45px сверху и снизу:

001.png

- Google Chrome (v. 55.0.2883.87 m);
- Mozilla Firefox (v. 50.1.0);
- Opera (v. 42.0.2393.94);
- Safari (macOS, v. 10.0 12602.1.32.7);

Для line-height отступы по 45px, для padding 46px сверху и 44px снизу:

002.png

- Safari (Windows, v. 5.1.7 7534.57.2);

В случаях с line-height и padding текст ровно по центру, отступы 46px сверху и 44px снизу:

003.png

- Internet Explorer 11 (v. 11.576.14393.0);
- Microsoft EDGE (v. 38.14393.0.0);

Я понимаю, что в ряде случаев это не принципиально, но что делать если блок с текстом это, например, меню, а сбоку от текста расположена ровная иконка, положение которой задано через background-position. Выравниваешь иконку для одного браузера - плывёт в другом. Выглядит весьма заметно и некрасиво. И Бог бы с этим эксплорером, но дело вот в чём, на Android 6.0.1 (device pixel ratio 4.0) стандартный интернет браузер, а также скаченный Google Chrome центруют неровно, также наблюдается расхождение в 1 пиксель, а вот на это уже закрывать глаза не хочется (большой скрин с Android):

Скрытый текст

004_.png

Что примичательно, высота первой буквы на настольных компьютерах 10px, а на андроиде чуть больше.

Разумеется добиться идеальной картинки, да ещё и во всех браузерах одновременно, невозможно, но ведь это не какой-то частный случай, а вполне закономерное желание разместить текст по центру меню-бара. Я буду очень признателен за Вашу помощь и пояснения на предмет "best-practices".

Что я пробовал для решения данной проблемы:

- Использовал разные шрифты, а также разные методы подключения внешних шрифтов: link через html / @import в CSS для Google Fonts, а также @font-face url для скаченных шрифтов;
- Задавал размеры шрифта, отступы, line-height в em / rem / px;
- Пробовал различные комбинации line-height + padding;
- Для создания иконок меню пробовал псевдо элементы, это конечно же решает проблему расположения иконок относительно текста, но не решает проблему центровки по вертикали.

P.S. CSS сброшен. Meta viewport задан.

Доп. вопрос от новичка: Почему, задавая размер шрифта 14px, заглавная буква по факту занимает 10px? При этом если я использую буквы типа "Й" и "р", высота занимаемая текстом будет уже 16px, но никак не 14px. Что-же задают тогда эти пиксели в размере шрифта?

Изменено пользователем Arinden

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

8 ответов на этот вопрос

  • 1

Браузеры все равно будут немного по-разному расчитывать эти размеры. Идеального соответствия вы не добъетесь. Все, что можно сделать, привязать иконку к тексту. Прыгать все равно будут, но уже вместе.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

https://jsfiddle.net/p4710ymL/

  j85YlYL.png

Ну и вместо вот этого

(100px - 14px) / 2 - 1px

лучше явно задать line-height и считать от него

(100px - <line-height>) / 2

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Текстовый узел лучше оберни в элемент и сбрось ему высоту строки line-height:1. Тогда никаких лишних отступов у текста не будет. С иконкой поступи аналогично. А для выравнивание элементов подключай флекс модуль и оперируй его свойствами.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
7 часов назад, Igor Schnaider сказал:

Вы не правильно замеры делаете. ... Шрифты все разные, высота букв будет отличаться.

Согласен, спасибо. Но шрифт для замеров импортирован в CSS с Google Fonts, получается рендер одного и того же шрифта на разных устройствах - разный? Как-то можно на это повлиять? Спасибо за Ваш пример на JSFiddle, но вот пример отображения в Safari на Windows:

005_.png

, а вот в Internet Explorer 11:

006_.png

Сам жёлтый блок по прежднему отцентрован по разному. При этом, высота жёлтого блока одинаковая, а вот его положение - нет, как бы я не производил замеры... =(

4 часа назад, by chris сказал:

Текстовый узел лучше оберни в элемент и сбрось ему высоту строки line-height:1. Тогда никаких лишних отступов у текста не будет. С иконкой поступи аналогично. А для выравнивание элементов подключай флекс модуль и оперируй его свойствами.

Спасибо за совет, попробую. Если у Вас есть несколько минут свободного времени, был бы очень рад получить пример с моим кодом на JSFiddle. :unsure:

Изменено пользователем Arinden

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
33 минуты назад, Arinden сказал:

но вот пример отображения в Safari на Windows

Вероятно, какие-то особенности у Safari для Windows. Но я не думаю, что на него вообще стоит тратить время. Так и до Netscape не далеко :-)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
20 минут назад, Igor Schnaider сказал:

Вероятно, какие-то особенности у Safari для Windows. Но я не думаю, что на него вообще стоит тратить время. Так и до Netscape не далеко :-)

Не только Safari. Safari и Internet Explorer и EDGE выводят результат иначе чем Google Chrome для Вашего примера. В Chrome 45px - 40px оба значения.

 

47 минут назад, Switch74 сказал:

я обычно делаю так
https://jsfiddle.net/zfwpurxL/

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

Internet Explorer: 35px 44px;
EDGE: 35px 45px;
Google Chrome: 35px 44px;
Mozilla Firefox: 34px 44px;
Safari: 34px 44px;

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

разные браузеры по разному округляют некоторые 35,5px превращают в 35px, а некоторые в 36px

если вам нужно везде все одинаково до px делайте выравнивание через свой script.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Похожие публикации

    • Автор: INVOLTA
      Программист PHP  (заработная плата от 20 000 до 90 000 руб.)
      Должностные обязанности: 
      • Разработка веб-проектов любой сложности
      Требования:
      • Опыт разработки высоконагруженных проектов как на чистом PHP, так и на фреймворках;
      • Опыт разработки с использованием ООП;
      • Опыт работы с реляционными и нереляционными базами данных (проектирование, оптимизация, администрирование);
      • Знание математики: мат. логика, теория вероятности, мат. анализ, статистика, мат. статистика;
      • Параллельное программирование;
      • Приветствуется опыт работы с рекламными сетями или общее представление как они работают.
       
      Разработчик JS (заработная плата 25 000 – 150 000 руб.)
      Должностные обязанности:
      • Проектирование систем средствами JavaScript
      Требования:
      • Отличное знание JavaScript (особенно ООП) и особенностей браузеров, опыт работы от 1 года;
      • Отличное владение jQuery; знание других фреймворков и принципов их работы также приветствуется;
      • Умение разделять код JS на модули. Желателен опыт работы с большими проектами.
       
      Программист С/С++  (заработная плата от 25 000 до 150 000 руб.)
      Должностные обязанности:
      • Разработка ПО средствами C/C++
      Основные требования:
      • Хорошее знание С++;
      • Знание основных алгоритмов и структур данных;
      • Понимание принципов ООП, паттерны проектирования;
      • Знание STL/Boost.
      Будет плюсом:
      • Знание Linux и опыт работы с GCC;
      • Навыки работы с системами контроля версий (GIT, SVN);
      • Использование современных стандартов C++11/14, современных практик программирования;
      • Уверенное владение ООП, паттернами проектирования, опыт работы с многопоточностью;
      • Навыки отладки, профилирования и оптимизации кода;
      • Устойчивая привычка проверять свой код, покрывать его юнит-тестами, проводить рефакторинг;
      • Наличие опыта коммерческой разработки на других языках программирования (C#/Java);
      • Опыт разработки высокодоступных сервисов (24/7).
       
      Разработчик мобильных приложений (Xamarin, Java, Swift) (заработная плата от 40 000 до 100 000 руб.)
      Должностные обязанности:
      • Разработка мобильных приложений на Xamarin/Android/iOS;
      • Адаптация технического задания, прототипирование и тестирование приложений;
      • Оптимизация взаимодействия приложений и серверной части.
      Требования:
      • Знание и опыт работы с Xamarin, понимание Xamarin.Forms;
      • Уверенное знание одной из мобильный платформ: iOS, Android;
      • Опыт разработки мобильных приложений на Android, iOS платформе;
      • Опыт работы c реляционными базами данных, такими как SQLite, проектирование баз данных;
      • Необходимые знания: Java, Swift, C#, Android SDK, Google Cloud Platform.

      Уровень заработной платы обсуждается на собеседовании.
      От нас - гибкий график, лучшие зарплаты, комфортные условия, молодой коллектив, новый крутой офис, своя кухня, занятия по стрейчингу, IT- party и многое другое! 
      От Вас - желание развиваться, работать и зарабатывать! 
      ООО "ИНВОЛЬТА" 
      г. Иваново, пр. Строителей, д. 94, оф. 196
      тел. 8(930)356-45-98
      maria@involta.ru
      t.me/involta
      involta.ru
    • Автор: xek
      Добрый день!
      Подгружаю шрифты с google fonts, имя шрифта Fira Sans (и причем он у них отображается корректно), но когда я его подгружаю он выглядит так как будто избитый.
      Привожу 2 скриншота:
      1. Как выглядит шрифт на google fonts

      2. Так выглядит у меня

      Почему так получается?
      Все эти манипуляции я провожу в браузере Firefox.
    • Автор: twentyfive_agency
      Мы достаточная слаженная команда и работаем как единый механизм.
      Все члены команды обладают достаточной компетенцией, чтобы выполнять работы разного уровня сложности.
      Сейчас у нас в команде:
      4 Технолога/Верстальщика (html5, css3, javascript, reat, angular) 2 Проектировщика/Дизайнера (invision, photoshop, illustrator, sketch) 3 Бэкенд разработчика (php, nodejs, python + работа со всеми известными cms,crm-системами) 4 Мобильных разработчика (1 iOs, 1 Android) 2 Тестировщика Каждый из членов команды четко понимает ответственность за проект!
      Все задачи ведем в Basecamp, Trello и JIRA, и всегда добавляем туда заказчика, чтобы формировалась прозрачность работы.
      Процесс работы по проектам у нас такой:
      Получаем задание Оцениваем сроки и стоимость, предоставляем информацию в электронном виде заказчику. Согласуем эти данные или вносим корректировки. Подписываем договор (с нашей стороны ИП) Получаем аванс по договору Начинаем работу по проекту Ведем разработку проекта Показываем финальную итерацию заказчику и запускаем проект в продакшн. Остаемся довольными сотрудничеством и получаем отзывы по работе, слаженности и о качестве проекта в целом. Рейты работы наших специалистов:
      Проектирование/Дизайн // 700-800 руб/час Верстка/js  // 700-800 руб/час Программирование (бэкенд) // 700-1000 руб/час Тестирование // 400-650 руб/час Разработка приложений (iOS, Android) // 1000-1400 руб/час Мы работаем над тем, чтобы:
      Заказчик всегда был уверен в том, что сроки по проекту не выйдут за согласованные. Заказчик был уверен в том, что качество работ будет проведено на высшем уровне. Заказчик похвалил нас и сказал, что вернется еще или останется с нами на техподдержку. Наши работы:
      http://greenjam.ru http://tuborg.ru http://k1664.ru http://corny.ru http://megalabs.ru http://prostude.net http://ecorse.education http://eqeducation.org http://dadacreative.com http://tfg.ru/ http://pirelli.autonews.ru/ http://id-direct.ru http://localway.ru  
       
      Twenty Five Agency
      twentyfive.agency
      Georgy Pantsulaya, CEO
      via phone: +7-989-536-00-35
      via skype: hello@twentyfive.agency