Html 在居中列表上居中项目符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5347833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering Bullets On A Centered List
提问by CenterMe
Example - http://jstn.info/html.html- link rot, example no longer available.
示例 - http://jstn.info/html.html- 链接失效，示例不再可用。
Notice the text is centered, but the bullet points themselves are not. How can I align the bullet points while keeping the text/list centered?
注意文本居中，但项目符号本身不是。如何在保持文本/列表居中的同时对齐项目符号？
采纳答案by Hussein
You asked the same question at Centering <UL> + Keeping <LI>'s Alignedand i already answered you.
您在Centering <UL> + Keeping <LI>'s Aligned 中问了同样的问题，我已经回答了您。
Give your div a class name center. Assuming your div width is 200px, margin:0 autowill center and text-align:leftwill align the text to the left while maintaining its centering due to margin auto.
给你的 div 一个类名center。假设您的 div 宽度为 200 像素，margin:0 auto将居中并将text-align:left文本向左对齐，同时由于边距自动保持居中。
.center{
width:200px;
margin:0 auto;
text-align:left;
}
Check working example at http://jsfiddle.net/8mHeh/1/
在http://jsfiddle.net/8mHeh/1/检查工作示例
回答by Davious
Please see https://stackoverflow.com/a/6558833/507421
请参阅https://stackoverflow.com/a/6558833/507421
ul {
list-style-position: inside;
}
回答by Jacob
The problem is that the bullets are controlled by the ulrather than the individual lis. I don't know a clean way of doing this off the top of my head; as a quick hack, try
问题是子弹是由sul而不是个人lis控制的。我不知道有什么干净的方法可以做到这一点。作为一个快速的黑客，尝试
ul { list-style-type: none; text-align: center; }
li::before { content: "22 " }
/* 0x2022 is unicode for a bullet */
Edit: as the user above me points out, you should be centering in the stylesheet rather than with align.
编辑：正如我上面的用户指出的那样，您应该将样式表居中而不是使用align.
To clarify, what we've actually done here is hidden the automatically-generated bullets (by setting list-style-typeto `none) and created "pseudo-bullets" in front of each li.
澄清一下，我们在这里实际所做的是隐藏自动生成的项目符号（通过设置list-style-type为“无”）并在每个 li 前面创建“伪项目符号”。
回答by Sawtaytoes
There are a bunch of ways to solve this depending on your project's UI needs.
根据您项目的 UI 需求，有很多方法可以解决这个问题。
I've listed 3 possible solutions here: https://codesandbox.io/s/r1j95pryn
我在这里列出了 3 种可能的解决方案：https: //codesandbox.io/s/r1j95pryn
Centered Bullets
居中子弹
ul {
list-style-position: inside;
padding-left: 0;
}
Left-Aligned Bullets w/ Centered Text
带有居中文本的左对齐项目符号
ul {
display: inline-block;
padding-left: 0;
}
Centered List w/ Left-Aligned Text
带有左对齐文本的居中列表
ul {
display: inline-block;
padding-left: 0;
text-align: left;
}
Visuals
视觉效果
