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

Question

I am creating a small widget for a page that lists the steps in reverse order. I plan to do this with oland set an attribute valuefor individual tags lito force the numbering olto change. So far so good.

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

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

<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 that I use after.

It would be a shame if I had to drag extra spaces in my markup for something that OL does automatically.

Answer 1

, .

IE7, , , (IE-, )

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>

Answer 2

- , . : .

, , ( ) . , , , ? .

FWIW, , HTML5 "reverseed" OL? , .

Answer 3

I'm not sure if this is what you mean by extra intervals, 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>

Answer 4

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