Why won't my list align horizontally center

问题:

I'm working on a basic nav bar project, and I've trying to get this list to align center. I've tried using align-content and text-align, but my bar is still positioned towards to the left.

Can you please show me how to center this list horizontally?

                  li1    li2      li3

(should be centered by css not spaces, of course)

Here is a Demo

@import url(http://fonts.googleapis.com/css?family=Quicksand:300);
#bannercontent {
  font-family: 'Quicksand:300';
  align-items: center;
  text-align: center;
  align-content: center;
  font-size: 25px;
}
.banner {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: grey;
  width: 560px;
  height: 40px;
  vertical-align: middle;
}
.links {
  text-decoration: none;
}
.links:hover {
  color: white;
}
.bannerlinks {
  display: inline;
  margin-right: 20px;
  border: 12px;
  border-color: black;
  background-position: 50% 50%;
}

<div id="bannercontent">
  <ul class="banner">
    <li class="bannerlinks"><a class="links" href="#">What We Do</a></li>
    <li class="bannerlinks"><a class="links" href="#">Pricing</a></li>
    <li class="bannerlinks"><a class="links" href="#">Contact Us</a></li>
    <li class="bannerlinks"><a class="links" href="#">Wholesale</a></li>
  </ul>
</div>

回答1:

You can simply give the .banner element margin-left: auto; margin-right: auto;

.banner {
    margin-left: auto;
    margin-right: auto;
}

回答2:

Looks like you just need margin: 0 auto; on the child element.

JSFiddle

#bannercontent {
    font-family:'Quicksand:300';
    text-align: center;
    font-size: 25px;
}
.banner {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    background-color: grey;
    width: 560px;
    height: 40px;
    vertical-align: middle;
}

回答3:

Its simply can done by balancing your margin .. as you given to right same do with giving left. here is the modified CSS

   @import url(http://fonts.googleapis.com/css?family=Quicksand:300);

#bannercontent{
    font-family: 'Quicksand:300';
    align-items: center;
    text-align: center;
    align-content: center;
    font-size: 25px;
}
.banner{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: grey;
    width: 560px;
    height: 40px;
    vertical-align: middle;
}
.links{
    text-decoration: none;  
}
.links:hover{
    color: white;
    text-align:center;
}
.bannerlinks
{
    display: inline;
    margin-right: 20px;
    border: 12px;
    border-color: black;
    background-position: 50% 50%;
}

回答4:

Add the /* the follwoing lines */ to .banner

margin-right:auto; margin-left:auto;

Check the answer below:

@import url(http://fonts.googleapis.com/css?family=Quicksand:300);

#bannercontent{


}



#bannercontent {
  font-family: 'Quicksand:300';
  font-size: 25px;
 
 
}
.banner {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: grey;
  width: 560px;
  height: 40px;
  vertical-align: middle;
  
   /* the follwoing lines */
    margin-right:auto;
  margin-left:auto;
}
.links {
  text-decoration: none;
}
.links:hover {
  color: white;
}
.bannerlinks {
  display: inline;
  margin-right: 20px;
  border: 12px;
  border-color: black;
  background-position: 50% 50%;
}

<div id="bannercontent">
  <ul class="banner">
    <li class="bannerlinks"><a class="links" href="#">What We Do</a></li>
    <li class="bannerlinks"><a class="links" href="#">Pricing</a></li>
    <li class="bannerlinks"><a class="links" href="#">Contact Us</a></li>
    <li class="bannerlinks"><a class="links" href="#">Wholesale</a></li>
  </ul>
</div>