中心在信中对标签与像素定义的宽度和高度

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。 它原则上工作正常，但问题是，为了中心的字母，填充需要改变一些从浏览器到大衣，由于我认为字体渲染。

有没有人知道一个更好的方法来实现这一点，其中的字母将被定位在没有定义像素数？

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