如何使无序列表的项目符号与文本居中？

Question

当我尝试将

<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/>

Answer 1

将

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>

Answer 2

您可以使用

list-style-position: inside;

元素上的

ul

来做到这一点：

ul {
    list-style-position: inside;
}

查看工作小提琴

Answer 3

TL；博士

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 会给我们这个：

但是如果我们在顶部添加CSS，就会得到这个：

Answer 4

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

尝试更改 CSS 代码：

<ul> max-width:1%; margin:auto;  text-align:left; </ul>

最大宽度：80% 或类似的值。

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

Answer 5

具体操作方法如下。

首先，这样装饰你的列表：

<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>