将中心项目放在中心列表中

Question

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

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

Answer 1

请参阅/sf/answers/459118341/

ul {
    list-style-position: inside;
}

Answer 2

您在中心<UL> +保持<LI>的对齐时问了同样的问题,我已经回复了您.

给你的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

根据项目的 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;
}

视觉效果

Answer 4

问题是子弹是由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前面创建"伪子弹".