Ich arbeite an einem Basisprojekt für die Navigationsleiste und habe versucht, diese Liste zentriert auszurichten. Ich habe versucht mitalign-content undtext-align, aber meine Leiste befindet sich immer noch links.

Können Sie mir bitte zeigen, wie ich diese Liste horizontal zentrieren kann?

                  li1    li2      li3

(sollte natürlich durch CSS zentriert sein, nicht durch Leerzeichen)

Hier ist einDem

@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>