List (li) does not align sequentially in browsers

Question

Here's the fiddle ( http://jsfiddle.net/PZgn8/8/ ). Note that it looks different in Chrome 27 and Firefox 21. I think this is a bug with Firefox, but Firefox gives me the result I want.

<ul style="text-align: center;"> <li> <a href="#">One</a> </li> <li> <a href="#">Two</a> <ul> <li> <a href="#">Two child</a> </li> </ul> </li> </ul> 

Basically, for the child ul in li I need its disks with the disks in the center, and not aside.

Answer 1

Provide style-style-position: inside so that it looks consistent across browsers, so the bullet also gets the text-align: center; property text-align: center; .

 li { list-style-position:inside; } 

Demo