html - 如何让 的要点与文本居中？

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 元素。 (example)

list-style-position property 的默认值在外面。

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>