如何在 HTML 中居中有序列表编号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19364836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center ordered list number in HTML
提问by Nikolas
I am currently learning HTML programming. I have a problem:
我目前正在学习 HTML 编程。我有个问题：
If I put like this:
如果我这样说：
<html>
<body align="middle">
HEADLINE
<ol>
<li>First Item</li>
</ol>
</body>
</html>
The problem is the number (1.) is on the left when I wanted it to be aligned under the headline. How can I get the whole list item to the middle?
问题是当我希望它在标题下对齐时，数字 (1.) 在左边。如何将整个列表项放到中间？
I need atleast 10 reputation to add pictures so I'll provide a link to another website for you to see the picture: ALIGNING
我需要至少 10 个声望才能添加图片，所以我会提供一个指向另一个网站的链接供您查看图片：对齐
回答by Nuno Duarte
You are aligning texts in the body.
您正在对齐正文中的文本。
Try this:
尝试这个：
.center {
text-align: center;
list-style-position: inside;
}<h4 align="center">HEADLINE</h4>
<ol class="center">
<li>First Item</li>
</ol>回答by Halie
Nikolas, aligning the numbers on an ordered list in CSS is as follows:
尼古拉斯，在 CSS 中对齐有序列表上的数字如下：
ol
{
display: inline-block;
margin-left: auto;
margin-right: auto;
}
**You must use a display-block because you need to put your list in a box for it to center the numbers with the list.
**您必须使用显示块，因为您需要将列表放在一个框中，以便将数字与列表居中。
回答by Godsayah
Further to Nuno Duarte's answer you can add breaks after list numbers which (I think) makes it look better in centered mode. (disclaimer: Not tested across browsers)
除了 Nuno Duarte 的回答之外，您可以在列表编号后添加中断（我认为）使其在居中模式下看起来更好。（免责声明：未跨浏览器测试）
.text-center {
text-align: center;
}
ol.text-center {
list-style-position: inside;
padding-left: inherit; /*Get rid of padding to center correctly*/
}
ol.text-center > li::before {
content: "\A";
white-space: pre;
}<h4 class="text-center">HEADLINE</h4>
<ol class="text-center">
<li>First Item</li>
</ol>回答by Shomeek Basu
This is very old post but this this is the solution I did.
这是非常老的帖子，但这是我所做的解决方案。
CSS:
CSS：
.center
{
text-align: center;
list-style-position: inside;
}
ol.center li
{
text-align: left;
margin-left: 45%;
}
HTML
HTML
<ol class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, repellat.
<li>List1<li>
<li>List2<li>
</ol>
Final Result would look lke this :
最终结果看起来像这样：
