html - text-align 不将 2 位数字居中，但适用于单个数字

Question

我有一个包含数字的圆形 div(总共有 12 个，并且它们递增)。我的样式非常完美并且一切正常，但我注意到如果数字超过一位，text-align 不会将数字居中对齐吗？

这是个位数的 div 的样子:

这是两位数的 div 的样子:

如您所见，第二张图片在右侧几个像素处。

现在我意识到这几乎肯定可以通过使用 padding 而不是 text-align 来解决，但我想知道为什么会发生这种情况并且 < em>如果有解决办法？

---

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/