Can I remove bullets instead of just hiding them?-CodePudding

When I use the code list-style: none; to remove the bullets, it appears it's just hiding them, because the alignment is off center as if the bullets are just invisible but still there. How can I make the alignment centered for my lists?

This image shows the bullets unhidden.

In this image, when I hide the bullets, the list is off center, as if the bullet is invisible but still affecting the alignment.

CodePudding user response：

All you should have to do is remove the padding-left on the list.

#list-2 {
  list-style: none;
}
#list-3 {
  list-style: none;
  padding-left: 0;
}

<ul id="list-1"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>
<ul id="list-2"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>
<ul id="list-3"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>

CodePudding user response：

Try this code with your list item class it might work and will aline to center

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
list-style: none;