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

问题描述 投票：15回答：3

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

如果我这样说：

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

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

我需要至少10个声望来添加图片，所以我将提供一个链接到另一个网站，供您查看图片：qazxsw poi

html list alignment
3个回答
32
投票

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

试试这个：

ALIGNING
.center {
  text-align: center;
  list-style-position: inside;
}
1
投票

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

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

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

1
投票

继Nuno Duarte的回答之后，您可以在列表编号之后添加中断（我认为）使其在居中模式下看起来更好。 （免责声明：未经过浏览器测试）

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

.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;
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.