如何在我的导航栏中居中列表项

Question

我在使用 CSS3 将我网站上的列表项目居中时遇到了一些问题，知道为什么我无法将项目居中吗？

下面是我的问题的截图： https://gyazo.com/4b68df7e38e71ae320fdb6cb1c0c4e87

下面是我为导航栏编写的 CSS3 和 HTML 代码：

.navigation ul {
  background-color: #A1C9EC;
  border-style: solid;
  border-color: #9FABB6;
  border-width: 1px;
}

.navigation ul li {
  display: inline-block;
  border-style: solid;
  border-color: #9FABB6;
  border-width: 1px;
  border-radius: 5px;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #ffffff;
  border-top-color: #ffffff;
  margin: 1em;
}

<!--Wrapper to adjust width of main body on desktop site.-->
<div class="wrapper">
  <h1>Shane's Portfolio</h1>
  <!--Navigation Bar (TOP)-->
  <div class="navigation">
    <nav>
      <ul>
        <li>Home</li>
        <li>My Work</li>
        <li>Qualifications</li>
        <li>About Me</li>
        <li>Contact Me</li>
      </ul>
    </nav>
  </div>

Answer 1

text-align: center;

在包装器上 div 应该可以解决问题。如果你可以分享 html 代码，那么给出答案就很容易了

Answer 2

您需要添加

text-align: center;
padding-left: 0;

到 .navigation ul { <ul> 有默认填充，这就是为什么你需要将它设置为 0。

（我还缩短了导航列表和单词，以便在您单击 "Run code snipped" 时获得正确的输出）

.navigation ul{
    background-color: #A1C9EC;
    border-style: solid;
    border-color: #9FABB6;
    border-width: 1px;
    text-align: center;
    padding-left: 0;
}

.navigation ul li 
{
    display: inline-block;
    border-style: solid;
    border-color: #9FABB6;
    border-width: 1px;
    border-radius: 5px;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #ffffff;
    border-top-color: #ffffff;
    margin: 1em;
}

<div class="wrapper">
  <h1>Shane's Portfolio</h1>
  <!--Navigation Bar (TOP)-->
  <div class="navigation">
      <nav>
          <ul>
              <li>Home</li>
              <li>My</li>
              <li>Qua</li>
          </ul>
      </nav>
  </div>
</div>

如何在我的导航栏中居中列表项

How to center list items in my navigation bar

html

css

listitem