如何使 HTML 有序列表的文本居中而不是数字标签居中

我正在为页面创建一个小部件，以相反的顺序列出步骤。我计划用一个ol并设置value个人的属性li标签强制编号ol被逆转。到目前为止，一切都很好。

然而，我有一个设计难题，我不确定可以用 css 解决。

有了这个标记，是否可以将文本居中但保持标签左对齐？

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

这是一张图片来说明我所追求的文本处理。

如果我必须在标记中添加额外的跨度来完成 OL 自动执行的操作，那将是一种耻辱。

您可以反转计数器，然后可以将计数器与文本分开对齐。

虽然不是 IE7，但它会使用默认值（内置的 IE hacks 恢复默认值）

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>