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

Question

我正在为一个以相反顺序列出步骤的页面创建一个小部件。我计划使用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自动执行的操作增加额外的跨度，那将是一种耻辱。

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

您将需要额外的元素 - 列表中的数字被视为文本的一部分，用于布局目的，如下所示。添加内部跨度设置为display：inline-block应该可以解决问题。

在设计说明中，值得指出的是，多行中心对齐文本非常难以扫描，因为文本的起点（左边缘）位于不同行的不同位置。一致的，如果大的文本缩进也适合你吗？它肯定会更具可读性。

FWIW，你知道HTML5包含OL的'反向'属性吗？当然，您仍然需要旧浏览器的值属性。

Answer 3

我不确定这是否是你推迟额外跨度的意思，但这有效：

<强> 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; }