html - 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 示例

Answer 1

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