Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Andrea Puro
Andrea Puro
1,778 Points
Posted by Andrea Puro
Andrea Puro
1,778 Points

Styling list bullet points in CSS

Hello everyone!

I am attempting to center my list in CSS. I have tried to use the text-align: center property, and margin: auto; property, and it seems to center the text of the list, however the bullet points remain styled on the left side of the page. Is there any way to keep the bullet points with the list text? Thanks!

5 Answers

Joe Cooper
Joe Cooper
7,431 Points
Joe Cooper
Joe Cooper
7,431 Points

Hi Andrea,

Absolutely!

By default. the bullets in a list item are placed outside of an element's content area (see CSS Box Model if you're not sure what I mean by content area), so using text-align: center; won't affect it. Luckily though, CSS provides us with a property that lets us move the bullets to within our content area.

That property is list-style-position, and it's very simple. Setting the value of it to inside will ensure that the bullets are inside of the content area and therefore will be affected by text-align: center;.

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

I hope that makes sense!

Joe

Steven Parker
Steven Parker
229,786 Points
Steven Parker
Steven Parker
229,786 Points

That works, but at least on Chrome it also expands the spacing between the bullets and the items.

Corey Bethel
Corey Bethel
10,832 Points
Corey Bethel
Corey Bethel
10,832 Points

You need to bring the bullet points inside the content flow by using list-style-position:inside;, and then center align the text.

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

This also works:

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

Justin Warren
Justin Warren
7,805 Points
Justin Warren
Justin Warren
7,805 Points

At first glance, I would maybe try to put the <ul> inside of a <div>. Then give the <div> a class name. From there try to apply the CSS stylings to the class.

So for example:

<div class="list">
     <ul>
       <li>Cats</li>
       <li>Dogs<li>
    </ul>
</div>

Then you could style the class:

.list {
     text-align: center;
}
Justin Warren
Justin Warren
7,805 Points
Justin Warren
Justin Warren
7,805 Points

But just a suggestion. I'm a new learner as well!

Steven Parker
Steven Parker
229,786 Points
Steven Parker
Steven Parker
229,786 Points

You can use "margin: auto;" if you constrain the list to a specific fixed width. But if you're not sure how wide it should be (or if it might change), you might use this trick:

ul {
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}
Andrea Puro
Andrea Puro
1,778 Points
Andrea Puro
Andrea Puro
1,778 Points

Thank you everyone! The list-style-position: inside; and text-align: center; seems to have solved the problem! :)

Steven Parker
Steven Parker
229,786 Points
Steven Parker
Steven Parker
229,786 Points

Andrea Puro — You might want to try my suggestion also to see if the makes a difference in the way it is displayed in your browser. I found the other techniques caused the spacing between the bullets and text to be larger than normal on Chrome.