为什么我的列表不能水平对齐 [英] Why won't my list align horizontally center

问题描述

我正在研究一个基本的导航栏项目，并试图让这个列表对齐中心。我尝试过使用 align-content 和 text-align ，但我的酒吧仍然位于左侧。

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

（当然，应该以css不为空格居中）

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

以下是 演示

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

推荐答案

你可以简单地给.banner元素margin-left：auto; margin-right：auto;

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

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

这篇关于为什么我的列表不能水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！