如何将导航项与页面中心对齐

Question

 * { margin: 0px; padding: 0px; box-sizing: border-box; } html { font-size: 10px; }.clearfix::after { display: block; clear: both; content: ""; } nav { position: absolute; margin: auto; .nav-container { padding-right: 2rem; padding-left: 2rem; padding-bottom: 2rem; margin-top: 2rem; margin-right: auto; margin-left: auto; .nav-list { list-style-type: none; .nav-item { display: inline-block; padding-left: 2rem; padding-right: 2rem; font-size: 1.2rem; .nav-link { text-decoration: none; color: #fbfdff; } } } } } header { background-color: #313131; height: 50rem; }

 <nav> <div class="nav-container"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">HOME</a></li> <li class="nav-item"><a href="#" class="nav-link">ABOUT ME</a></li> <li class="nav-item"><a href="#" class="nav-link">PROJECTS</a></li> <li class="nav-item"><a href="#" class="nav-link">CONTACT</a></li> </ul> </div> </nav>

如何将导航项与导航容器的中心对齐？ 导航栏应该有透明背景，所以我想添加 position: absolute; 导航元素的样式。 此外，所有 nav-item 都应该并排出现。 这就是为什么我添加了 display: inline-block; 风格给他们。

Answer 1

将nav的宽度设置为全宽，然后使用text-align: center 。

nav {
    width: 100%;
    text-align: center;
}

Answer 2

有很多方法，但我更喜欢在“导航列表”中使用 flexbox 或 css 网格。 这是使用 felexbox 的示例：

.nav-list {
          display:flex;
          justify-content:center;
          align-items: center; (if want to align vertically as well)
          list-style-type: none;
}

它将解决您的问题，复制粘贴并享受。

Answer 3

只需在 css 中添加它，它将位于中心

.nav-list{
  display: grid;
  justify-content: center;
}

Answer 4

您的 styles 语法不正确。

 * { margin: 0px; padding: 0px; box-sizing: border-box; } html { font-size: 10px; }.clearfix::after { display: block; clear: both; content: ""; }.nav-container { padding-right: 2rem; padding-left: 2rem; padding-bottom: 2rem; margin-top: 2rem; margin-right: auto; margin-left: auto; }.nav-list { list-style-type: none; }.nav-item { display: inline-block; padding-left: 2rem; padding-right: 2rem; font-size: 1.2rem; }.nav-link { text-decoration: none; } header { background-color: #313131; height: 50rem; }

 <nav> <div class="nav-container"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">HOME</a></li> <li class="nav-item"><a href="#" class="nav-link">ABOUT ME</a></li> <li class="nav-item"><a href="#" class="nav-link">PROJECTS</a></li> <li class="nav-item"><a href="#" class="nav-link">CONTACT</a></li> </ul> </div> </nav>