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

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 la开发者_如何学Pythonbels 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.

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>

You're going to need that extra element - the numbers in the list are considered part of the text for layout purposes like this. Adding an inner span set to display: inline-block should do the trick.

On a design note, it's worth pointing out that multiple lines of center-aligned text are very hard to scan, as the starting point (left edge) of the text is in a different place from line to line. Would a consistent, if large, text-indent suit you just as well? It would definitely be more readable.

And FWIW, did you know that HTML5 includes the 'reversed' attribute on OL's? You'll still need your value attributes for older browsers, of course.

I'm not sure if this is what you mean by shoving extra spans, but this works:

CSS:

li {text-align:center; margin-bottom:4px;}
#list {display:block;width:300px;background:#ddd;text-align:center;}

HTML

<ol>
<li><div id="list">This is item four</div></li>
<li><div id="list">This is item three</div></li>
<li><div id="list">This is item two</div></li>
<li><div id="list">This is item one</div></li>
</ol>

li{ list-style:none; text-align:center; }
li:before{ content:attr(value); float:left; }