CODEWITHSUNDEEP
htmlcsshtml-lists
LearnerBeware
LearnerBeware

Reputation: 73

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;
}
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Gallery</li>
  <li>Contact
    <li>
</ul>

Upvotes: 1

Views: 448

Answers (2)

derp
derp

Reputation: 2308

Here you go!

HTML

<div class="nav">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Gallery</li>
    <li>Contact
      <li>
  </ul>
</div>

CSS

.nav ul {
  text-align: center;
  border: 2px red solid;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  color: white;
  text-transform: uppercase;
}

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371143

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; }

Upvotes: 3

Related Questions