Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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
216,135 Points

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

Corey Bethel
Corey Bethel
8,330 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

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

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

Steven Parker
Steven Parker
216,135 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

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

Steven Parker
Steven Parker
216,135 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.