text-align doesn't center 2 digit numbers but works on single digits

Question

I have a circular div that contains a number, (there are 12 in total and they increment). I've got the styling all perfect and everything's working nice, but I noticed that if a number has more than one digit text-align wont center align the number?

This is what the single digit div looks like:

This is what the double digit div looks like:

As you can see the second image is a few pixles to the right.

Now I realize this can almost definitely be solved by using padding instead of text-align but I was wondering why this happens and if there is a work around?

---

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

(ignore PIE.htc)

jsFiddle Example

Answer 1

It's because the font you're using is not monospaced. Try a monospaced font, like font-family:courier;. Take a look at this updated jsFiddle: http://jsfiddle.net/sKpkQ/2/