How do I get the bullets of an unordered list to center with the text?

Question

When I try to center a <ul> the text in the <li> centers but the bullet points stay on the far left of the page. Is there any way to get the bullet points to stay with the text when it is centered?

#abc {
    text-align: center; 
}

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

Morava

Answer 1

Add list-style-position: inside to the ul element. (example)

The default value for the list-style-position property is outside.

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

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

Another option (which yields slightly different results) would be to center the entire ul element:

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

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

Comeuppance

is it just me or is there extra margin/padding between the actual bullet and the text? – Editorialize

@Editorialize - Are you referring to the default padding-left: 40px? If not, then you may be referring to the cross-browser inconsistencies regarding the spacing as noted on MDN: developer.mozilla.org/en-US/docs/Web/CSS/list-style-position – Comeuppance

Your second method is the only one that worked for me – Precocious

Strange... In my case the first solution results in the bullet points going onto separate lines from the text. Checked all elements in CSS and can't find the cause. – Mencher

The first example doesn't work in Chrome today. The bullets are shifted based on list item text length. – Byelection

First method works well, but a note that if you have a header above it looks a bit offset. A negative margin on the li tags neatens it up. – Liba

Answer 2

You can do that with list-style-position: inside; on the ul element :

ul {
    list-style-position: inside;
}

See working fiddle

Lozano

This was good though I was trying to find a way to configure this through bootstrap. I was not able to find anything that worked using bootstrap purely. Thanks for sharing! – Intrigante

Answer 3

TL;DR

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

Explanation: The first property padding-left: 0 clears the default padding/spacing for the ul element while list-style-position: inside makes the dots/bullets of li aligned like a normal text.

So this code

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

without any CSS will give us this:

but if we add in the CSS give at the top, that will give us this:

Vulgar

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Deland

Answer 4

I found the answer today. Maybe its too late but still I think its a much better one. Check this one https://jsfiddle.net/Amar_newDev/khb2oyru/5/

Try to change the CSS code : <ul> max-width:1%; margin:auto; text-align:left; </ul>

max-width:80% or something like that.

Try experimenting you might find something new.

Walleye

Answer 5

Here's how you do it.

First, decorate your list this way:

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

Add this 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;
}

And voila, it works. Resize a window, to see that it indeed works.

As a bonus, you can easily change font and color of bullets, which is very hard to do with normal lists.

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

Countryandwestern