Падскажите кроссбраузерный способ как текст внутри блока выровнять по вертикали по центру.
В первом примере (с номерками) я для блока задал 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: