保证金：0 自动不工作

Question

margin: 0 auto 到底需要什么才能工作？它通常对我有用，但出于某种原因，在这种特殊情况下，我无法将导航菜单居中。 Fiddle 附在下面。

.item-list {
  display: flex;
  margin: 0 auto;
}

.item {
  margin-left: 10px;
  list-style: none;
}

.item a {
  color: #37302b;
  font-size: 20px;
}

header {
  position: inherit;
  height: 50px;
}

<header>
  <nav class="desktop-nav">
    <ul class="item-list">
      <li class="item active">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Home</a>
      </li>
      <li class="item">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Newest</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Most Popular</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Categories</a>
      </li>
      <li class="item">
        <a href="#blog" data-scroll>Stash</a>
      </li>
      <li class="item">
        <a href="#">Contact</a>
      </li>
      <li class="item" onclick="showSearch();">
        <a href="#">Search</a>
      </li>
    </ul>
  </nav>
</header>

https://jsfiddle.net/wwf1at2n/1/

Answer 1

由于您使用的是 flexbox，因此您可以将 justify-content: center 添加到 .item-list 规则中（无边距：需要自动）：

.item-list {
  display: flex;
  justify-content: center;
}

.item {
  margin-left: 10px;
  list-style: none;
}

.item a {
  color: #37302b;
  font-size: 20px;
}

header {
  position: inherit;
  height: 50px;
}

<header>
  <nav class="desktop-nav">
    <ul class="item-list">
      <li class="item active">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Home</a>
      </li>
      <li class="item">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Newest</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Most Popular</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Categories</a>
      </li>
      <li class="item">
        <a href="#blog" data-scroll>Stash</a>
      </li>
      <li class="item">
        <a href="#">Contact</a>
      </li>
      <li class="item" onclick="showSearch();">
        <a href="#">Search</a>
      </li>
    </ul>
  </nav>
</header>

Answer 2

添加 justify-content: center; 因为您正在使用 display: flex

Answer 3

margin: 0 auto; 需要块级元素才能在正常情况下工作。

保证金：0 自动不工作

margin: 0 auto not working

html

css

margin