将列表中的弹性项目居中

Question

所以我在将正在制作的菜单中的项目居中时遇到了问题。

我试过输入 justify-content: center 但这似乎不起作用。有人可以帮忙吗？

现在菜单卡在左下角。我想居中。

.header2 {
  background-color: rgb(190, 13, 13);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px;
}

.menu {
  display: flex;
}

.menu li {
  margin-right: 15px;
}

.menu li a {
  display: block;
  padding: 10px;
}

<nav class="header2">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</nav>

Answer 1

嵌套的 flexbox (.menu) 默认设置为 flex-grow: 0，这意味着它不会占据父级的全部长度。

因此，应用 justify-content: center 无效，因为容器中没有可用的 space。

添加 flex-grow: 1 可提供您需要的额外 space：

将此添加到您的代码中：

.menu {
    display: flex;
    flex: 1;
    justify-content: center;
}

此外，由于您已经在使用具有语义意义的 nav 元素，因此实际上不需要嵌套列表元素。试试这个简化的代码：

.menu {
  display: flex;
  justify-content: center;
  background-color: rgb(190, 13, 13);
}

.menu a {
  padding: 25px 10px;
}

.menu a:hover {
  background-color: orangered;
}

<nav class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contacts</a>
</nav>

Answer 2

尝试：

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 1; /* or width: 100% */
}

如果您希望元素按所有宽度均匀分布。

并且：

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-grow: 1; /* or width: 100% */
}

否则。

将列表中的弹性项目居中

Centering flex items inside a list

css

centering

flexbox