我目前正在学习 HTML 编程。我有一个问题：
如果我像这样写：
<html>
<body align="middle">
HEADLINE
<ol>
<li>First Item</li>
</ol>
</body>
</html>
我需要至少10个声望才能添加图片，所以我会为您提供一个链接，让您查看图片：ALIGNING
5个回答
84
您正在对正文中的文本进行对齐。
尝试这个：
.center {
text-align: center;
list-style-position: inside;
}<h4 align="center">HEADLINE</h4>
<ol class="center">
<li>First Item</li>
</ol>- Nuno Duarte
2
这对我起作用了，为什么我尝试将它放在单独的CSS文件中却不起作用呢？ - Nikolas
6对于读者来说，关键在于
list-style-position: inside;。它会让浏览器将列表标记（在这种情况下是数字）视为与文本一起呈现，并且可以受到 text-align 的影响。 - Ben Hull4
对于有序列表，我的基本要求是：
- 该列表应独立成行，不与任何相邻元素或背景图像接触。
- 有序列表元素应水平居中于网页上，同时垂直对齐列表项。
- 列表项目标记应在列表内部。
使用 DuckDuckGo 搜索引擎，我使用以下搜索语句：“如何在网页上水平居中有序列表”
它返回了第一个记录，其中包含以下链接：https：//css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/
文章提供将列表元素作为 div 元素的子元素进行布局，并在 div 元素的 CSS 中使用规范 "display: table;"。
我还看到其他解决方案使用 "text-align: center;" 在 tag 的 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>
- Bert Houser
2
display: table; 对我来说是个魔法般的解决方案。 - rob这太棒了。如果使用情况允许的话，可以简化为
margin: auto。也不需要使用list-style-position: inside。 - undefined3
这是一个非常旧的帖子，但这是我采取的解决方案。
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>
最终的结果如下所示：
- Shomeek Basu
1
margin-left: 45% 这个想法不太好。 - undefined1
尼古拉斯，使用CSS对有序列表中的数字进行对齐的方法如下：
ol
{
display: inline-block;
margin-left: auto;
margin-right: auto;
}
你必须使用display-block，因为你需要将列表放在一个盒子中，以便使数字与列表居中。
- Halie
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>- Godsayah
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
ol li{ text-align:center; width:300px; }。 - Kai Qing