Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container. If you’ve changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won’t work.
When I try to center a <ul> the text in the <li> centers but the bullet points stay on the far left of the page. Is there any way to get the bullet points to stay with the text when it is centered?
Try like this… or unobtrusively using just
Expand snippet
List items are normally block elements. Turn them into inline elements via the display property. In the code you gave, you need to use a context selector to make the display: inline property apply to the list items, instead of the list itself (applying display: inline to the overall list will have no effect): Here … Read more
This code will remove the indentation and list bullets. http://jsfiddle.net/qeqtK/2/
As Felipe Alsacreations has already said, the first option is fine. If you want to ensure that nothing below the list is interpreted as belonging to the heading, that’s exactly what the HTML5 sectioning content elements are for. So, for instance you could do
Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container. If you’ve changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won’t work.
You could use :before and content: bearing in mind that this is not supported in IE 7 or below. If you’re OK with that then this is your best solution. See the Can I Use or QuirksMode CSS compatibility tables for full details. A slightly nastier solution that should work in older browsers is to … Read more
You can use margin. See the example: http://jsfiddle.net/LthgY/