Question

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

如果我这样说：

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

问题是当我希望它在标题下对齐时，数字（1.）在左边。如何将整个列表项目放到中间？

我需要至少10个声望才能添加图片，因此我会提供指向其他网站的链接，以便您查看图片：ALIGNING

Answer 1

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

试试这个：

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

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

Answer 2

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

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

**您必须使用显示块，因为您需要将列表放在一个框中，以便将数字与列表对中。

Answer 3

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

Answer 4

这是很老的帖子，但这是我解决的方法。

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>

最终结果看起来像这样：

Answer 5

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

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

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

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

本文提出将列表元素作为 div 元素的子元素，然后在 CSS 中为 div 元素指定 "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>

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

5 个答案: