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.

Answer 1

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

Answer 2

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

ul {
    list-style-position: inside;
}

Answer 3

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/

Answer 4

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.