如何使用 flexbox 使导航栏完全居中

Question

仍然是一个新手，希望得到一些指导，因为这种情况在我的项目中不断发生。

我使用 display:flex 创建了一个导航栏 - 我认为我已将所有内容居中对齐，但它向右移动。

由于以下属性，我希望导航居中对齐。

.navlist {
  display: flex;
  justify-content: center;
}

.navlist li {
  padding: 20px;
  list-style-type: none;
  text-align: center;
}

但我得到的结果稍微偏离中心

我也试过 margin: auto 但还是搞不懂！

提前致谢

Answer 1

对您的代码进行了细微更改，看看它是否符合您的预期

.navlist {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-left: 0;
}

Answer 2

在您的 CSS 中添加以下代码，它应该可以正常工作。

.navlist li:first-child {padding-left: 0;}

你的导航有点小的原因 off-center 是它根据你的代码添加了 20px 的左填充，所以导航向右移动了 20px。

希望这个回答对您有所帮助！

How to fully center a nav bar using flexbox