CODEWITHSUNDEEP
htmlcsscentering
Matt
Matt

Reputation: 73

Unordered List Won't Center Align

h1 seems to have no trouble centering, however, the list (menu bar) will not align, it seems to be indented slightly. Please explain.

My HTML:

<h1>Welcome!</h1>

    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact</li>
    </ul>

My CSS:

h1{
text-align: center;
}

ul{
  position:relative;
  display: inline-block;  
  list-style: none;
  width:100%;
  text-align: center;
  margin: auto;
}

li{
  list-style: none;
  text-align: center;
  margin: 15px; 
  display: inline-block; 
}

Upvotes: 0

Views: 4579

Answers (1)

Reinier Kaper
Reinier Kaper

Reputation: 1129

There's still default padding on the ul element. Change the CSS of your ul to this and it'll work:

ul{
  position:relative;
  display: inline-block;  
  list-style: none;
  width:100%;
  text-align: center;
  margin: auto;
  padding: 0;
}

Upvotes: 1

Related Questions