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

how do I get the bullet points of a <ul> to center with the text?

提问by a person

When I try to center a <ul>the text in the <li>centers but the bullet points stay on the far left of the page. Is there any way to get the bullet points to stay with the text when it is centered?

当我尝试<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/>

回答by Josh Crozier

Add list-style-position: insideto the ulelement. (example)

添加list-style-position: inside到ul元素。（例子）

The default value for the list-style-positionpropertyis outside.

为默认值list-style-position属性为outside。

ul {
    text-align: center;
    list-style-position: inside;
}

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

Another option (which yields slightly different results) would be to center the entire ulelement:

另一种选择（产生略有不同的结果）是将整个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>

回答by Michael P. Bazos

You can do that with list-style-position: inside;on the ulelement :

你可以list-style-position: inside;在ul元素上做到这一点：

ul {
    list-style-position: inside;
}

See working fiddle

见工作小提琴

回答by Amar Parajuli

I found the answer today. Maybe its too late but still I think its a much better one. Check this one https://jsfiddle.net/Amar_newDev/khb2oyru/5/

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

Try to change the CSS code : <ul> max-width:1%; margin:auto; text-align:left; </ul>

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

max-width:80% or something like that.

max-width:80% 或类似的东西。

Try experimenting you might find something new.

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

回答by Leonid Titov

Here's how you do it.

这是你如何做到的。

First, decorate your list this way:

首先，以这种方式装饰您的列表：

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

Add this CSS:

添加这个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;
}

And voila, it works. Resize a window, to see that it indeed works.

瞧，它有效。调整窗口大小，以查看它确实有效。

As a bonus, you can easily change font and color of bullets, which is very hard to do with normal lists.

作为奖励，您可以轻松更改项目符号的字体和颜色，这对于普通列表来说是非常困难的。

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