如何在HTML中居中排序列表编号_Html_List_Alignment

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

html list

如何在HTML中居中排序列表编号,html,list,alignment,Html,List,Alignment,我目前正在学习HTML编程。我有一个问题：如果我这样说： <html> <body align="middle"> HEADLINE <ol> <li>First Item</li> </ol> </body> </html> 大字标题第一项问题是，当我希望它在标题下对齐时，数字（1.）在左边。如何将整个列表项放在中间我需要至少10个声誉来添加图片，因此我将提供到另一个网站的链接，供您查

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

如果我这样说：

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


大字标题
第一项

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

我需要至少10个声誉来添加图片，因此我将提供到另一个网站的链接，供您查看图片：

您正在对齐正文中的文本

试试这个：

.center{
文本对齐：居中；
列表样式位置：内部；
}

标题
第一项

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

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

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

根据Nuno Duarte的回答，您可以在列表数字之后添加分隔符，这（我认为）使列表在居中模式下看起来更好。（免责声明：未跨浏览器测试）

。文本中心{
文本对齐：居中；
}
文字中心{
列表样式位置：内部；
左侧填充：继承；/*去掉填充以正确居中*/
}
ol.text-center>li:：before{
内容：“\A”；
空白：预处理；
}

标题
第一项

这是一篇非常古老的文章，但这是我做的解决方案

CSS:

HTML

Lorem ipsum dolor坐在我的位子上。讨厌，讨厌。
列表1

列表2

最终结果如下所示：

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

该列表应位于其自身的行上，且没有任何其他元素与其相邻，或任何背景图像

有序列表元素应该在web上水平居中垂直对齐列表项的页面

列表项标记应位于列表中

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

它返回了具有以下链接的第一个条目，

本文提供将列表元素作为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>

ol.center-list{
显示：表格；
左边距：自动；
右边距：自动；
列表样式位置：内部；
}
序数字
首先
第二
第三
四

您是否有一张图片可以精确地显示您想要的内容？您是否熟悉css

ol li{text align:center；width:300px；}

例如，这听起来像是CSS的工作，而不是HTML。那么如何在CSS中完成呢？我在CSS方面有点经验。ol li{}仍然只对齐文本，而不是实际数字。这是出于设计。如果你想移动Elsehare的数字，请告诉我们你想要什么。这对我来说很有效，为什么它不能像我尝试的那样在单独的CSS文件中工作呢？对于读者来说，关键是

列表样式位置：inside。它使浏览器考虑列表标记（在这种情况下，数字）与文本一起呈现，因此它可以受<代码>文本对齐< /代码>的影响。
<ol class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, repellat.
<li>List1<li>
<li>List2<li>
</ol>

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>