Jump to content
  • 0

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


Arinden
 Share

Question

Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на 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. Что-же задают тогда эти пиксели в размере шрифта?

Edited by Arinden
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 1

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

Link to comment
Share on other sites

  • 0

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

https://jsfiddle.net/p4710ymL/

  j85YlYL.png

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

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

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

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

 

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 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:

Edited by Arinden
Link to comment
Share on other sites

  • 0
33 минуты назад, Arinden сказал:

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

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

Link to comment
Share on other sites

  • 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;

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Алеся
      Доброго вечера! Подскажите, пожалуйста, в чем проблема неотображения скаченного шрифта? Путь к файлу, если что, проверила. Заранее спасибо!
      @font-face {
        font-family:"Lato-Italic";
        src: url('./fonts/Lato-Italic.ttf');
      }
      Его использование:
      .three-columns__item-radius p {
        text-align: justify;
        margin: 26px 20px 0 20px;
        font-family:"Lato-Italic";
      }
       
       
    • By Алеся
      Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо!  
      <div class="three navigation items">       <nav> <ul>   <li> <div class="navigation__item"></div> <a href="#">Hot themes</a>   </li>   <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a>   </li>   <li>     <div class="navigation__item"></div>     <a href="#">El'Classico</a>   </li> </ul>       </nav>     </div>   .navigation {
          background-color: rgba(31, 30, 30, 0.438);
          width: 900px;
          height: 30px;  
      }
      .navigation li {
          display: inline-block;
          padding: 5px 15px;
      &:hover {
          content: "";
          background-color: rgb(36, 36, 36);
          cursor: pointer;
      }
      }
      a {
          color: black;
          text-decoration: none;
          font-family: sans-serif;
      &:hover {
        content: "";
        color: white;
       }
      }

    • By kapushoniha
      Добрый день!
      Столкнулась со странной проблемой, буду признательна, если вы объясните в чем дело.
      Подключила шрифт Gotham вместо OpenSans на страницу, после чего ссылки c font-weight: 500 перестали работать.
        Для начертаний bold и 300 все ок.
      Как вообще начертание шрифта может влиять на работу тега и почему это не происходит с OpenSans ?
      Шрифт подключаю так:
      <style> @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Medium.eot'}}"); src: url("{{asset 'Gotham-Medium.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Medium.woff2'}}") format('woff2'), url("{{asset 'Gotham-Medium.woff'}}") format('woff'), url("{{asset 'Gotham-Medium.ttf'}}") format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Bold.eot'}}"); src: url("{{asset 'Gotham-Bold.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Bold.woff2'}}") format('woff2'), url("{{asset 'Gotham-Bold.woff'}}") format('woff'), url("{{asset 'Gotham-Bold.ttf'}}") format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Light.eot'}}"); src: url("{{asset 'Gotham-Light.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Light.woff2'}}") format('woff2'), url("{{asset 'Gotham-Light.woff'}}") format('woff'), url("{{asset 'Gotham-Light.ttf'}}") format('truetype'); font-weight: 300; font-style: normal; } </style>  
      Заранее спасибо!
       
       

    • By Роман Онищенко
      Разрабатываю React/React Native приложения. С образцами моих некоммерческих работ вы можете ознакомиться по адресу: https://github.com/Roman-Onishchenko?tab=repositories
      Готов рассмотреть ваши предложения о разработке React/React Native приложений различной тематики и объема работ с частичной занятостью (до 30 рабочих часов в неделю). 
      Мои контакты:
      skype - romanonishencko
      email - roman951t@gmail.com
    • By maxfloyd
      Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)

      Код: https://jsfiddle.net/aemjkhp9/
  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy