视觉效果

Question

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

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

Answer 1

ul {
    list-style-position: inside;
}

Answer 2

你在Centering <UL> + Keeping <LI>'s Aligned问了同样的问题，我已经回复了你。

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

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

检查http://jsfiddle.net/8mHeh/1/

处的工作示例

Answer 3

问题是子弹是由ul而不是单个li控制的。我不知道从头顶做这件事的干净方法;快速破解，试试

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

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

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

Answer 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;
}