How can I center the text but not the number label of an HTML ordered list

Question

I am creating a little widget for a page that lists steps in reverse order. I plan on doing this with an ol and setting the value attribute on the individual li tags to force the numbering of the ol to be reversed. So far so good.

However, I have a design conundrum that I'm not sure can be solved with css.

With this mark up, is it possible to center the text but keep the labels left-aligned?

<ol>
    <li value="5">item 5</li>
    <li value="4">item 4</li>
    <li value="3">item 3</li>
    <li value="2">item 2</li>
    <li value="1">item 1</li>
</ol>

Here is an image to illustrate the text treatment I am after.

It would be a shame if I had to shove extra spans in my markup for something that OLs do automatically.

Answer 1

You can reverse counters, then you can align the counters separately from the text.

not IE7 though, but with the values it'll default (IE hacks built in get back the defaults)

CSS:

ol {
    padding: 0;
    margin: 0;
    list-style-type: decimal !ie7;
    margin-left: 20px !ie7;
    counter-reset:item 6; /* one higher than you need */
    width: 250px;
    border: 1px solid #000;
}
ol > li {
    counter-increment:item -1;
    text-align: center;
}
ol > li:before {
    content:counter(item) ". ";
    float: left;
    width: 30px; background: #eee;
}

HTML

<ol>
    <li value="5">item 5</li>
    <li value="4">item 4</li>
    <li value="3">item 3</li>
    <li value="2">item 2</li>
    <li value="1">item 1</li>
</ol>