LearnerBeware LearnerBeware - 1 year ago 71
CSS Question

Centering a un-ordered list

I am trying to center an un-ordered list without the bullet points using CSS. And no matter what I've tried the list is being centered including the bullet points.

enter image description here

Even though you can not see the bullet points they are still being included when I try to center the list.

.nav ul {
margin: auto;
text-align: center;
border: 2px red solid;
list-style-type: none;
.nav li {
color: white;
text-transform: uppercase;
padding: 0 15px;
margin: auto;
list-style-type: none;


Answer Source

HTML ordered and unordered lists normally have a default padding or margin for indentation. This is included in the browser's default style sheet.

Some browsers apply padding-left. Others use margin-left.

The W3C recommends margin-left: 40px (source).

When you center an HTML list, the left-side padding/margin will be centered along with the content, positioning the content center-right.

Try this:

ul { margin-left: 0; padding-left: 0; }