如何将文本居中，而不是HTML有序列表的数字标签 [英] How can I center the text but not the number label of an HTML ordered list

问题描述

我正在为一个页面创建一个小部件，按相反的顺序列出步骤。我计划用 ol 这样做，并在个人上设置 value 属性 / code>标签强制转换 ol 的编号。到目前为止很好。

但是，我有一个设计难题，我不能确定可以用css解决。

使用此标记，可以将文本居中，但将标签保持左对齐？

 code>< ol> 
< li value =5> item 5< / li> 
< li value =4>项目4< / li> 
< li value =3>项目3< / li> 
< li value =2>项目2< / li> 
< li value =1> item 1< / li> 
< / ol> 
  

这是一张图片来说明我之后的文字处理。

$ b $

解决方案如果我不得不在我的标记中推出额外的范围， div>

你可以反转计数器，然后你可以对齐计数器分开的文本。

不是IE7，但带有默认的值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; / *一个比你需要的更高* / 
 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;背景：#eee; 
} 
  

HTML

 < ol> 
< li value =5> item 5< / li> 
< li value =4>项目4< / li> 
< li value =3>项目3< / li> 
< li value =2>项目2< / li> 
< li value =1> item 1< / li> 
< / ol> 
  

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

这篇关于如何将文本居中，而不是HTML有序列表的数字标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！