Centering Bullets On A Centered List

Question

~~Example - http://jstn.info/html.html~~ - link rot, example no longer available.

Notice the text is centered, but the bullet points themselves are not. How can I align the bullet points while keeping the text/list centered?

I am on the actual page, but it still produces the same problem. — CenterMe, Mar 18 '11 at 03:55
Possible duplicate of [Centering
+ Keeping
's Aligned](http://stackoverflow.com/questions/5347451/centering-ul-keeping-lis-aligned) — Ken Sharp, Jan 07 '16 at 09:08

score 136 · Answer 1 · edited May 23 '17 at 12:10

136

Please see https://stackoverflow.com/a/6558833/507421

ul {
    list-style-position: inside;
}

edited May 23 '17 at 12:10

Community

1
1

answered Nov 28 '12 at 02:36

Davious

1,833
2
15
16

1

While this works, it also messes with the centering. I think `display: inline-block` on the `ul` might do a better job of centering in a way you'd expect depending on your needs. – Kevin Ghadyani Jan 16 '19 at 21:58
You are super epic! – user1286956 Sep 21 '21 at 18:27

score 10 · Accepted Answer · edited May 23 '17 at 11:54

10

You asked the same question at Centering <UL> + Keeping <LI>'s Aligned and i already answered you.

Give your div a class name center. Assuming your div width is 200px, margin:0 auto will center and text-align:left will align the text to the left while maintaining its centering due to margin auto.

.center{
    width:200px;
    margin:0 auto;
    text-align:left;
}

Check working example at http://jsfiddle.net/8mHeh/1/

edited May 23 '17 at 11:54

Community

1
1

answered Mar 18 '11 at 03:58

Hussein

42,480
25
113
143

You can now use `margin: 0 auto; display: table;`. – wazz Aug 09 '17 at 23:45

Jacob · Answer 3 · 2011-03-18T04:04:52.707

The problem is that the bullets are controlled by the ul rather than the individual lis. I don't know a clean way of doing this off the top of my head; as a quick hack, try

ul { list-style-type: none; text-align: center; }
li::before { content: "\2022 " }
/* 0x2022 is unicode for a bullet */

Edit: as the user above me points out, you should be centering in the stylesheet rather than with align.

To clarify, what we've actually done here is hidden the automatically-generated bullets (by setting list-style-type to `none) and created "pseudo-bullets" in front of each li.

score 8 · Answer 4 · answered Jan 16 '19 at 22:15

8

There are a bunch of ways to solve this depending on your project's UI needs.

I've listed 3 possible solutions here: https://codesandbox.io/s/r1j95pryn

Centered Bullets

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

Left-Aligned Bullets w/ Centered Text

ul {
    display: inline-block;
    padding-left: 0;
}

Centered List w/ Left-Aligned Text

ul {
    display: inline-block;
    padding-left: 0;
    text-align: left;
}

Visuals

answered Jan 16 '19 at 22:15

Kevin Ghadyani

6,829
6
44
62

2

This is the best answer I've found so far and nicely shows the possibilities – user21398 Dec 14 '20 at 22:24