如何使 < ul > 的项目符号与文本居中？

当我试图在 <ul>中心的文本在 <li>中心，但是项目符号点留在页面的最左边。有没有什么办法可以让要点在文本居中时保持不变？

#abc{text-align: center; }


<div id="section1">
<div id="abc">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div/>
<div/>
170920 次浏览
小开

将 list-style-position: inside添加到 ul元素

list-style-position财产的默认值是 outside。

ul {
text-align: center;
list-style-position: inside;
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

另一种选择(结果略有不同)是将整个 ul元素居中:

.parent {
text-align: center;
}
.parent > ul {
display: inline-block;
}
<div class="parent">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>

小开

你可以在 ul元素上使用 list-style-position: inside;:

ul {
list-style-position: inside;
}

看工作小提琴

小开

我今天找到了答案。也许为时已晚，但我仍然认为这是一个更好的。检查这个 https://jsfiddle.net/Amar_newDev/khb2oyru/5/

尝试更改 CSS 代码: <ul> max-width:1%; margin:auto; text-align:left; </ul>

最大宽度: 80% 左右。

尝试一下，你可能会发现一些新的东西。

小开

你要这么做。

首先，这样装饰你的清单:

<div class="p">
<div class="text-bullet-centered">&#8277;</div>
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
</div>
<div class="p">
<div class="text-bullet-centered">&#8277;</div>
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
</div>

添加 CSS:

.p {
position: relative;
margin: 20px;
margin-left: 50px;
}
.text-bullet-centered {
position: absolute;
left: -40px;
top: 50%;
transform: translate(0%,-50%);
font-weight: bold;
}

瞧，成功了，调整窗口大小，看看它是不是真的成功了。

作为奖励，你可以很容易地改变字体和颜色的项目符号，这是非常难以做到的正常列表。

.p {
position: relative;
margin: 20px;
margin-left: 50px;
}


.text-bullet-centered {
position: absolute;
left: -40px;
top: 50%;
transform: translate(0%, -50%);
font-weight: bold;
}
<div class="p">
<div class="text-bullet-centered">&#8277;</div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text
</div>
<div class="p">
<div class="text-bullet-centered">&#8277;</div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text
</div>

小开

DR

ul {
padding-left: 0;
list-style-position: inside;
}

说明: 第一个属性 padding-left: 0清除 ul元素的默认填充/间距，而 list-style-position: inside使 li的点/子弹像正常文本一样对齐。

所以这个代码

<p>The ul element</p>
<ul>
asdfas
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

没有任何 CSS 会给我们这个:
enter image description here
但是如果我们在顶部添加 CSS，就会得到这样的结果:
enter image description here


提交答案