p-tag中的中心字母，带有像素定义的宽度和高度

Question

我正在尝试创建一个带有数字的圆圈：

这是我目前的做法：

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

使用border-radius创建一个带有背景颜色的圆形p-tag。 它在原理上工作正常，但问题是，为了使字母居中，填充需要从浏览器到broswer一些变化，因为我认为是字体渲染。

有没有人知道一种更好的方法来实现这一点，其中字母将居中而不定义像素数？

Answer 1

请勿使用填充调整文本的位置，请使用line-height

JSFiddle Demo

.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 */
}