【问题标题】：Centering Bullets On A Centered List在居中列表上居中项目符号
【发布时间】：2011-07-17 21:32:36
【问题描述】：

~~示例 - http://jstn.info/html.html~~ - 链接失效，示例不再可用。

请注意文本居中，但项目符号本身不是。如何在保持文本/列表居中的同时对齐项目符号？

【问题讨论】：

【解决方案1】：

请看https://stackoverflow.com/a/6558833/507421

ul {
    list-style-position: inside;
}

【讨论】：

【解决方案2】：

您在Centering <UL> + Keeping <LI>'s Aligned 提出了同样的问题，我已经回答了您。

给你的 div 一个类名center。假设您的 div 宽度为 200 像素，margin:0 auto 将居中，text-align:left 将文本向左对齐，同时由于边距自动保持其居中。

.center{
    width:200px;
    margin:0 auto;
    text-align:left;
}

在http://jsfiddle.net/8mHeh/1/查看工作示例

【讨论】：

【解决方案3】：

问题在于子弹是由ul而不是单个lis控制的。我不知道有一种干净的方法可以做到这一点。作为一个快速破解，试试

ul { list-style-type: none; text-align: center; }
li::before { content: "\2022 " }
/* 0x2022 is unicode for a bullet */

编辑：正如我上面的用户指出的那样，您应该以样式表为中心而不是align。

为了澄清，我们在这里实际上所做的是隐藏自动生成的项目符号（通过将list-style-type 设置为`none）并在每个 li 前面创建“伪项目符号”。

【讨论】：

【解决方案4】：

有很多方法可以解决这个问题，具体取决于您项目的 UI 需求。

我在这里列出了 3 种可能的解决方案： https://codesandbox.io/s/r1j95pryn

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

ul {
    display: inline-block;
    padding-left: 0;
}

ul {
    display: inline-block;
    padding-left: 0;
    text-align: left;
}

视觉效果

【讨论】：