text-align不以2位数字为中心，而是以单个数字为中心

Question

我有一个包含数字的循环div（总共有12个并且它们会递增）。我的造型都很完美，而且一切都很好用，但是我注意到如果一个数字有一个以上的数字text-align不会中心对齐这个数字？

这就是单个数字div的样子：

这就是双位数div的样子：

正如你所看到的，第二幅图像是右边的几个像素。

现在我意识到这几乎可以通过使用padding代替text-align来解决，但我想知道为什么会发生这种情况而如果那里是一种解决方法吗？

---

CSS

.number-circle {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);
    background-color: #76d17f;
    height: 19px;
    width: 24px;
    border: #fff 3px solid;
    cursor:pointer;
    color:#fff;
    text-align:center;
    padding-top:4px;
    font-weight:600;
    font-size:14px;
}

（忽略PIE.htc）

jsFiddle Example

Answer 1

这是因为您使用的字体不是等宽字体。尝试使用等宽字体，例如font-family:courier;。看看这个更新的jsFiddle：http://jsfiddle.net/sKpkQ/2/