center bullet list

should be simple, but just not happening today

[bgirl]

I'm trying to center a bulleted list in CSS. This should be very boneheadedly simple, but it is just not working for me today.
.list li {
text-align:center;
}

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>etc</li>
</ul>

IE on PC centers the bullets with the text fine, just how it was intended. Safari 1.2 Mac has the bullets left justified, but the text is centered. I tried fussing with the margins, but nothing really shoves the bullet over next to the text.

Which browser is correct?

[drbrain]

Its hard to say which is correct:

The marker box is outside the principal block box. Note. CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers.

CSS2 list-style-position [w3.org]

Try list-style-position: inside in .list li note that if you have multiple lines, the text on the second line will not line up with the first line, and instead will line up with the left border of the marker box.

[bgirl]

Thanks... I knew I stepped in it today. The list-style-position: inside; seemed to have no effect on .list li, though I had done it that way on another page and it was doing that offset of the first line thing.

So I'll just do it the lazy way today:

.list li {
text-align:center;
list-style-type: none;
}

<ul>
<li>&#8226; item 1</li>
<li>>&#8226; item 2</li>
<li>>&#8226; item 3</li>
<li>>&#8226; etc</li>
</ul>

[sonjay]

Have you tried centering the ul instead of the li's?

[bgirl]

Have you tried centering the ul instead of the li's?

That did it. Thank you. I tried everything BUT that.

just added ul
.list ul {
text-align: center;
}

instead of
.list {
text-align: center;
}