我目前正在学习HTML编程。我有一个问题:
如果我这样说:
<html>
<body align="middle">
HEADLINE
<ol>
<li>First Item</li>
</ol>
</body>
</html>
问题是当我希望它在标题下对齐时,数字(1.)在左边。如何将整个列表项目放到中间?
我需要至少10个声望才能添加图片,因此我会提供指向其他网站的链接,以便您查看图片:ALIGNING
答案 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>
答案 4 :(得分:0)
对于有序列表,我的基本要求是:
使用 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>