Как я могу получить точки маркера <ul> в центр с текстом?

Когда я пытаюсь центрировать <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/>

Ответ 1

Добавьте list-style-position: inside элемент ul. (пример)

Значение по умолчанию для свойства list-style-position указано outside.

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

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

Ответ 2

Вы можете сделать это с помощью list-style-position: inside; в элементе ul:

ul {
    list-style-position: inside;
}

См. рабочую скрипту

Ответ 3

Я нашел ответ сегодня. Может быть, уже слишком поздно, но все же я думаю, что это намного лучше. Проверьте это https://jsfiddle.net/Amar_newDev/khb2oyru/5/

Попробуйте изменить код CSS: <ul> max-width:1%; margin:auto; text-align:left; </ul>

максимальная ширина: 80% или что-то в этом роде.

Попробуйте поэкспериментировать, вы можете найти что-то новое.

Ответ 4

Вот как ты это делаешь.

Сначала украсьте свой список следующим образом:

<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>