1

Падскажите кроссбраузерный способ как текст внутри блока выровнять по вертикали по центру.

В первом примере (с номерками) я для блока задал line-height равный его высоте. У меня на Windows во всех браузерах все хорошо, а вот на Mac OS центровка почему-то нарушается.

.number {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  line-height: 110px;
  text-align: center;
  background: #0046bf;
  font-family: "Harmonia Sans Pro Cyr Bold", sans-serif;
  font-size: 55px;
  color: #fff;
}
<div class="number">01</div>

Слева — так должно быть, справа — так в Mac OS в Google Chrome:

Для кнопки задал разные padding-top и padding-bottom с учетом размера line-height, чтобы в итоге отсуп сверху и снизу был одинаковый. На Windows он у меня и стал одинаковый, но в Mac OS все поехало.

.card__btn {
  display: block;
  width: 310px;
  padding-top: 9px;
  padding-bottom: 15px;
  border-radius: 35px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.26);
  box-shadow: 8px 8px 21px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  background: linear-gradient(166deg, #336ace 0%, #3972d5 50%, #235abf 50%, #013ca3 100%);
}
<a class="card__btn" href="#">
   Хочу купить и растаможить <br> Ford Focus на меня
</a>

Слева — так должно быть; справа — так на Mac OS в Google Chrome:

4
  • 1
    Есть неуверенное предположение, что это может быть связано со шрифтом. Вы пробовали менять шрифт на другой ради эксперимента? Например, я сейчас ваш код завернул в сниппеты, и при отсутствии шрифта Harmonia на компьютере используется стандартный шрифт браузера — если вы их попробуете запустить в ваших хроме и сафари, оно ровное или неровное?
    – andreymal
    10 янв 2018 в 13:53
  • @andreymal, Поставил шрифт Arial, запустил тест для Mac OS, то да, в номерках текст по вертикали выровнялся ровно по центру. Получается это шрифт какой-то некорректный, нужно другой использовать? 10 янв 2018 в 14:29
  • Я не юзал ваших шрифтов и не могу отвечать точно, но возможно что так
    – andreymal
    10 янв 2018 в 14:30
  • 1
    Если к сайту подключен шрифт в нескольких разных форматах, то возможно какой-то один из форматов (который используется в маке) оказался кривой, а остальные (один из которых используется в винде) некривые, но это я наугад предполагаю
    – andreymal
    10 янв 2018 в 14:32

1 ответ 1

1

Можно попробовать отцентровать текст с помощью display: flex, justify-content: center и align-items: center

.card__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px;
  padding-top: 9px;
  padding-bottom: 15px;
  border-radius: 35px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.26);
  box-shadow: 8px 8px 21px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  background: linear-gradient(166deg, #336ace 0%, #3972d5 50%, #235abf 50%, #013ca3 100%);
}
<a class="card__btn" href="#">
   Хочу купить и растаможить <br> Ford Focus на меня
</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.