30

I am currently learning HTML programming. I have a problem:

If I put like this:

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

The problem is the number (1.) is on the left when I wanted it to be aligned under the headline. How can I get the whole list item to the middle?

I need atleast 10 reputation to add pictures so I'll provide a link to another website for you to see the picture: ALIGNING

4

5 回答 5

68

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

尝试这个：

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

于 2013-10-14T16:58:38.260 回答
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>

最终结果看起来像这样： 输出

于 2019-10-03T14:42:24.680 回答
1

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

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

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

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

这篇文章提供了将列表元素放置为 div 元素的子元素，然后"display: table;"在 CSS 中为 div 元素指定规范​​。

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

下面是我没有 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>
于 2021-04-01T17:42:39.413 回答
1

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

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

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

于 2015-09-23T16:21:07.137 回答
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>

于 2018-03-05T10:29:08.493 回答