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

时间:2013-10-14 16:30:27

标签: html list alignment

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

如果我这样说:

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

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

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

5 个答案:

答案 0 :(得分:33)

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

试试这个:

.center {
  text-align: center;
  list-style-position: inside;
}
<h4 align="center">HEADLINE</h4>
<ol class="center">
  <li>First Item</li>
</ol>

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

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

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>

最终结果看起来像这样: Output

答案 4 :(得分:0)

对于有序列表,我的基本要求是:

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

使用 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>