如何在 HTML 中将有序列表编号居中答案

【问题标题】：How to center ordered list number in HTML如何在 HTML 中将有序列表编号居中
【发布时间】：2013-10-22 06:57:51
【问题描述】：

我目前正在学习 HTML 编程。我有一个问题：

如果我这样说：

<html>
<body align="middle">
HEADLINE
<ol>
<li>First Item</li>
</ol>
</body>
</html>

问题是数字 (1.) 在我希望它在标题下方对齐时位于左侧。如何将整个列表项放在中间？

我需要至少 10 个声望才能添加图片，所以我会提供另一个网站的链接供您查看图片：ALIGNING

【问题讨论】：

你有图片可以准确地展示你想要的东西吗？
你对css很熟悉吗？以ol li{ text-align:center; width:300px; } 为例
这听起来像是 CSS 的工作，而不是 HTML。
那么如何在 CSS 中做到这一点？我在 CSS 方面有一点经验。那个 ol li{} 仍然只对齐文本，而不是实际数字。
这是设计使然。如果您想将号码移到其他地方，请告诉我们您想要什么。

标签： html list alignment

【解决方案1】：

您正在对齐正文中的文本。

试试这个：

.center {
  text-align: center;
  list-style-position: inside;
}

<h4 align="center">HEADLINE</h4>
<ol class="center">
  <li>First Item</li>
</ol>

【讨论】：

这对我有用，为什么它不像我尝试的那样在单独的 CSS 文件中工作？
对于读者 - 关键是list-style-position: inside;。它会导致浏览器考虑将列表标记（在本例中为数字）与文本内联呈现，因此它可能会受到text-align 的影响。

【解决方案2】：

这是非常老的帖子，但这是我所做的解决方案。

CSS：

.center
{
 text-align: center;
 list-style-position: inside;
}
ol.center li
{
 text-align: left;
 margin-left: 45%;
}

HTML

<ol class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, repellat.
<li>List1<li>
<li>List2<li>
</ol>

最终结果看起来像这样：

【讨论】：

【解决方案3】：

Nikolas，在 CSS 中对齐有序列表上的数字如下：

     ol
    {
       display: inline-block;
       margin-left: auto;
       margin-right: auto;
    }

**你必须使用显示块，因为你需要把你的列表放在一个盒子里，这样它才能使列表中的数字居中。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

对于有序列表，我的基本要求是：

列表应该在自己的行上，没有任何其他元素与之相邻，或任何背景图片。
有序列表元素应在网络上水平居中列表项垂直对齐的页面。
列表项标记应位于列表内。

使用 DuckDuckGo，我使用了以下搜索语句： “如何在网页上水平居中有序列表”

它返回了具有以下链接的第一个条目， https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

本文提供了将列表元素作为 div 元素的子元素，然后在 div 元素的 CSS 中指定 "display: table;"。

我看到了在标签的 CSS 中使用 "text-align: center;" 的其他解决方案。这种方法将页面上的每个列表项水平居中，而不是垂直对齐列表标记。

下面是我没有 div 元素的实现。 CSS 在页面上水平居中列表。

ol.center-list{
  display: table;
  margin-left: auto;
  margin-right: auto;
  list-style-position: inside;
}

<ol class="center-list">
   Ordinal Number Words
   <li>first</li>
   <li>second</li>
   <li>third</li>
   <li>forth</li>
</ol>

【讨论】：