如何获得<ul>的要点以文本为中心？</ul>

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的默认值为outside。

＆＃13;

＆＃13;

ul {
    text-align: center;
    list-style-position: inside;
}

＆＃13;

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

另一个选项（产生稍微不同的结果）将使整个ul元素居中：

＆＃13;

＆＃13;

.parent {
  text-align: center;
}
.parent > ul {
  display: inline-block;
}

＆＃13;

<div class="parent">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用list-style-position: inside;元素上的ul执行此操作：

ul {
    list-style-position: inside;
}

<强> See working fiddle

Answer 3

<块引用>

TL;DR

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

说明： 第一个属性 padding-left: 0 清除 ul 元素的默认填充/间距，而 list-style-position: inside 使 li 的点/项目符号像普通文本一样对齐。

所以这段代码

<p>The ul element</p>
<ul>
asdfas
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

没有任何 CSS 会给我们这个：

但是如果我们在顶部添加 CSS 给我们，就会得到这个：

Answer 4

我今天找到了答案。也许为时已晚，但我认为它更好。检查一下https://jsfiddle.net/Amar_newDev/khb2oyru/5/

尝试更改CSS代码：<ul> max-width:1%; margin:auto; text-align:left; </ul>

最大宽度：80％或类似的东西。

尝试尝试你可能会发现新的东西。

Answer 5

这是您的操作方式。

首先，以这种方式装饰您的列表：

<div class="p">
<div class="text-bullet-centered">&#8277;</div>
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
</div>
<div class="p">
<div class="text-bullet-centered">&#8277;</div>
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
</div>

添加此CSS：

.p {
    position: relative;
    margin: 20px;
    margin-left: 50px;
}
.text-bullet-centered {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translate(0%,-50%);
    font-weight: bold;
}

瞧，它起作用了。调整窗口大小，看它确实可以工作。

作为奖励，您可以轻松更改项目符号的字体和颜色，这对于普通列表来说很难做到。

.p {
  position: relative;
  margin: 20px;
  margin-left: 50px;
}

.text-bullet-centered {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translate(0%, -50%);
  font-weight: bold;
}

<div class="p">
  <div class="text-bullet-centered">&#8277;</div>
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text
</div>
<div class="p">
  <div class="text-bullet-centered">&#8277;</div>
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text
</div>