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

回答1:

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

来源：https://stackoverflow.com/questions/27025008/unordered-list-wont-center-align