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

我正在为一个页面创建一个小部件，该页面按相反顺序列出步骤。我计划使用

ol

进行此操作，并在单个

li

标记上设置

value

属性，以强制反转

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

第5项
第4项
第3项
第2项
第1项

这里有一个图像来说明我所追求的文本处理

---

如果我不得不在标记中添加额外的跨距以实现OLs自动完成的功能，那将是一件非常遗憾的事情。

您将需要额外的元素-列表中的数字被视为文本的一部分，用于这样的布局目的。添加一个内部跨度集来显示：inline块应该可以做到这一点

在设计说明中，值得指出的是，多行居中对齐的文本很难扫描，因为文本的起点（左边缘）在每行的不同位置。如果文本缩进较大，那么一致的缩进是否也适合您？它肯定会更具可读性

---

还有FWIW，你知道HTML5在OL上包含了“反向”属性吗？当然，对于较旧的浏览器，您仍然需要您的值属性。

我不确定这是否就是您所说的增加跨距的意思，但这是有效的：

CSS:

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

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

这是第四项
这是第三项
这是第二项
这是第一项

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

虽然不是IE7，但它将使用默认值（即内置黑客恢复默认值）

CSS:

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

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

第5项
第4项
第3项
第2项
第1项

我知道反向属性（从今天起），但当我在firebug（使用FF4）中测试它时，它不起作用，所以我坚持到底。至于使用文本缩进，我担心的是，可能会有一种情况，即项目中的文本太多，因此缩进将无法工作。缩进或居中，我把自己放在摇摇欲坠的地面上。很可能我最终将不得不重新设计它，以允许多行标签。谢谢你的建议！哇-我以为FF4肯定会支持它。很高兴知道-谢谢！这正是我所说的增加跨距的意思（除了使用div）。此外，标签ID应该是唯一的。谢谢你，太棒了！我不知道content属性的counter（item），所以我忽略了：before，before，before。谢谢你。@dingoatingfuzz，不客气-是的，现在我们家门口的东西很酷，但找到所有东西是个问题；）