¿Cómo hago para que las viñetas de una lista desordenada se centren con el texto?

Cuando trato de centrar un <ul> el texto en el <li> centros, pero las viñetas permanecen en el extremo izquierdo de la página. ¿Hay alguna forma de hacer que las viñetas permanezcan con el texto cuando está centrado?

#abc{text-align: center; }

<div id="section1">
<div id="abc">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div/>
<div/>

Agregar list-style-position: inside hacia ul elemento. (ejemplo)

El valor predeterminado para el list-style-position propiedad es outside.

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

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

Otra opción (que arroja resultados ligeramente diferentes) sería centrar todo el ul elemento:

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

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

Puedes hacer eso con list-style-position: inside; sobre el ul elemento :

ul {
    list-style-position: inside;
}

Ver violín de trabajo

TL;RD

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

Explicación:
la primera propiedad padding-left: 0 borra el relleno/espaciado predeterminado para el ul elemento mientras list-style-position: inside hace los puntos/viñetas de li alineado como un texto normal.

Así que este código

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

sin ningún CSS nos dará esto:


pero si agregamos el CSS en la parte superior, eso nos dará esto:

Encontré la respuesta hoy. Tal vez sea demasiado tarde, pero aún así creo que es mucho mejor. Revisa este https://jsfiddle.net/Amar_newDev/khb2oyru/5/

Intenta cambiar el código CSS: <ul> max-width:1%; margin:auto; text-align:left; </ul>

ancho máximo: 80% o algo así.

Intenta experimentar, quizás encuentres algo nuevo.

Así es como lo haces.

Primero, decora tu lista de esta manera:

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

Agrega este 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;
}

Y listo, funciona. Cambiar el tamaño de una ventana, para ver que efectivamente funciona.

Como beneficio adicional, puede cambiar fácilmente la fuente y el color de las viñetas, lo cual es muy difícil de hacer con las listas normales.

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