Центральная буква в p-теге с пиксельной шириной и высотой

Я пытаюсь создать круг с номером в нем:

Это мой нынешний подход:

<p class="count">1</p>

Css:

.count{
background: #002244;
color: white;
font-size: 32px;
border-radius: 25px;
box-sizing: border-box;
height: 50px;
width: 50px;
text-align: center;
padding-top: 20px 18px;
}

Он создает круглый p-тег с фоновым цветом с использованием граничного радиуса. В принципе это прекрасно работает, но проблема в том, что для того, чтобы центрировать буквы, набивка должна варьироваться от браузера до браузеров, из-за того, что, по моему мнению, выполняется рендеринг шрифтов.

Кто-нибудь знает лучший метод для достижения этого, когда буквы будут центрироваться без определения количества пикселей?

0
источник поделиться
1 ответ

Не используйте отступы для настройки местоположения текста, используйте line-height

Демо-версия JSFiddle

.count{
background: #002244;
color: white;
font-size: 32px;
border-radius: 50%; /* use percentage instead of px value */
box-sizing: border-box;
height: 50px;
width: 50px;
text-align: center;
line-height:50px; /* same as element height */
}
0
источник

Посмотрите другие вопросы по метке или Задайте вопрос