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

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


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

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

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

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

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


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

Войти

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


Войти сейчас

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

    • Автор: Vic-Tor
      Добрый день!
      Помогите, у меня в css вот такая байда: #content p{margin-top:10px;text-align:justify;padding-left:20px;padding-right:20px;}
      В связи с эти, не могу уменьшить паддинг текста в дивах. 
      Как это сделать! Я не асс в css.
      На всякий случай вот тут всплывающее окно.
    • Автор: Toxa404
      Html код
      <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Axit</title>     <link rel="stylesheet" href="style.css"> </head> <body>            <div class="bg_h">            <header>                <a href="index.html" > <img src="img/logo.png"></a>                <ul class="sidebar_head">                    <li><a href="">Features</a></li>                    <li><a href="">About</a></li>                    <li><a href="">Pricing</a></li>                    <li><a href="">Reviews</a></li>                    <li><a href="">Contact</a></li>                </ul>            </header>        </div>       <div class="wrapper">               <div class="block_1 ">           <div class=" modern">              <div class="form">                  <ul>                      <li><button class="but_1">Try Your FREE Trial Today</li>                      <li><input type="text" placeholder="Name"></li>                      <li><input type="email" placeholder="Email"></li>                      <li><input type="password" placeholder="Password"></li>                      <li><button class="but_2">Get Started</button></li>                 </ul>               </div>               <span>MODERN AXURE TEMPLATE <br> FOR BEAUTIFUL PROTOTYPES</span>               <img src="img/modern_line.png" alt="">               <p>                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean <br>                 euismod bibendum laoreet. Proin gravida dolor sit amet lacus <br>                 accumsan et viverra justo commodo.               </p>               <button>Download</button>                         </div>                   </div>        <div class="social_media">               <ul>                     <li><a href="" class="icon rss"></a></li>                     <li><a href="" class="icon znak"></a></li>                     <li><a href="" class="icon inst"></a></li>                     <li><a href="" class="icon pi"></a></li>                     <li><a href="" class="icon goog"></a></li>                     <li><a href="" class="icon twit"></a></li>                     <li><a href="" class="icon fb"></a></li>                 </ul>                <h2>Social Media</h2>               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>                 Aenean euismod bibendum laoreet.</p>                                      </div>  <!--social_media END  -->        <div class="tab_soft">            <p>dasdawsdaw</p>        </div>   </div>   </body> </html> CSS код
      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {     margin: 0;     padding: 0;     border: 0;     font-size: 100%;     font: inherit;     vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {     display: block; } body {     line-height: 1; } ol, ul {     list-style: none; } blockquote, q {     quotes: none; } blockquote:before, blockquote:after, q:before, q:after {     content: '';     content: none; } table {     border-collapse: collapse;     border-spacing: 0; } li{     list-style: none; } a{     text-decoration: none; }                              body{     font-family: 'Times New Roman';        background-color: #282828;  }                                 .wrapper{              width: 1400px;     margin: 0 auto;         padding: 100px;      }                             /* header */ .bg_h{        background-color:#000;     } header{     max-width:1400px;     margin: 0 auto;         height: 70px; } header>a{     display: inline-block;     margin:20px 0 20px 150px; } header li{     display:inline-block;     } .sidebar_head{     float:right;        margin-top: 25px;     margin-right: 150px;     } .sidebar_head a{     color:#c9c9c9;     font-size: 14px;     font-family: 'Times New Roman';     margin-left: 43px; }                         /*header end*/ .block_1{     height: 640px;     background-color: #9a9a9a;     } .modern{     height: 640px;     background-image: url(img/Logo_modern.png);     background-repeat: no-repeat;     background-position: 140px 110px; /*    padding-left: 140px;*/     padding-right: 140px; } .block_1 span{     display: block;     color: #fff;     font-size: 36px;     font-weight: normal;     font-family: 'Times New Roman';     padding-top: 200px; } .block_1 img{     margin-top:40px; } .block_1 p{     font-size: 16px;     line-height: 23px;     color:#c6c6c6;     margin-top: 40px;     } .modern>button{     font-size: 15px;     line-height: 15px;     color:#fff;     padding: 13px 28px;     border:2px solid #f5f5f5;     margin-top: 45px;     background-color: #9a9a9a; } .form{     float: right;     width: 362px;     height: 362px;     margin-top: 140px;     background-color: #fff;      border-radius: 5px 5px 5px 5px; } .but_1{     width: 362px;     font-size: 20px;     line-height: 60px;     background-color: #f5f5f5;     border:none;     border-radius: 5px 5px 0 0; } .but_2{     color:#fff;     font-size: 15px;     background-color: #ff9b51;         height: 53px;     width: 362px;     border: none;     margin-top: 44px;     border-radius:0 0 5px 5px ;     } .form input{     margin:0 40px;     margin-top: 35px;     width:275px;     height: 30px;     border:none;     border-bottom: 1px solid #d6d6d6;     border-left: 1px solid #fbfbfb;     border-right: 1px solid #fbfbfb;     } .social_media{         border-bottom: 1px solid #b7b7b7;     outline-bottom: solid 1px #d6d6d6;     padding:22px 83px 20px 140px;          background-color:#fff; } .social_media h2{     margin-bottom: 10px;     font-size: 20px;     color:#282828;     font-weight: bold; } .social_media p{     font-size: 15px;     line-height: 20px;     color:#a9aaac;        } .icon{     height: 50px;     width: 54px;      float:right;     margin:7px 45px auto 0; } .rss{     background: url(img/social-media-icons.png) no-repeat -591px center; } .znak{     background: url(img/social-media-icons.png) no-repeat -483px center; } .inst{     background: url(img/social-media-icons.png) no-repeat -376px center; } .pi{     background: url(img/social-media-icons.png) no-repeat -272px center; } .goog{     background: url(img/social-media-icons.png) no-repeat -183px center; } .twit{     background: url(img/social-media-icons.png) no-repeat -76px center; } .fb{     background: url(img/social-media-icons.png) no-repeat 20px center; } .tab_soft{     height: 590px;     background-color: #f5f5f5; } не понимаю почему padding в классе wrapper действуют как маргины, хочу сделать отступы с левой и правой стороны внутри блока , а отступы появляются вокруг . Вроде бы вложено все правильно, в верстке новичек прошу строго не судить)

    • Автор: dandirector
      Вот страница, которая не отображается https://dandirector.github.io/thermasteel/ проблема обнаружена на android 4.2.2 в uc brouser, хотел бы отметить, что вместо верстки видно просто белый экран. В других браузерах все гуд.