锚标签未正确居中

Question

我目前正在创建一些页面作为免费代码训练营 CSS 挑战的一部分。

由于某些原因，一旦我在@media 激活时折叠网格，我的标签就没有正确居中。它们不断向右侧漂移。

完整笔的 link 在这里：

我已经尝试过使用 inline-block display、justify-self to center 等

<html>
<header id="header">
  <figure>
    <img id="header-img"src="https://cdn.shopify.com/s/files/1/0866/9666/files/checkout_logo_4_1024x2_37df55d3-8344-46fb-8913-ea64de22f564_500x.png?v=1509363172">
  </figure>
  <div>
  <h1>Doce Meliponicultura</h1>
      <p>Reconnect with Mother-nature</p>
  </div>
    <nav id="nav-bar">
      <ul>
      <li><a href="#top-features" class="nav-link">Top Features</a></li>
      <li><a href="#products" class="nav-link">Products</a></li>
      <li><a href="#social" class="nav-link">Social</a></li>
      </ul>
  </nav>
</header>
</html>

<style>
a {text-decoration: none; display: inline-block;}

#header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: gold;
  align-items: center;
  justify-self: center;
  position: fixed;
  top: 0;
  left:0;
  width: 100%;
  z-index: 99;
}

@media (max-width: 600px) {
  #header {grid-template-areas: "title" "logo" "nav-bar";}
  #header > figure {grid-area: logo;}
  #header > div {grid-area: title;}
  #header > nav {grid-area: nav-bar;}
}

#header > figure {
  justify-self: start;
  align-self: center;
  display: relative;
  max-height: 140px;
}

@media (max-width: 600px) {
  #header > figure {
    justify-self: center;
  }
}

#header > nav {
  justify-self: end;
}

@media (max-width: 600px) {
  #header > nav {
    justify-self: center;
  }
}
</style>

Answer 1

您可以在您的@media（最大宽度：600px）中添加以下CSS

#header > nav > ul{
     padding: 0px;
}

它将解决您的问题。

Answer 2

我也会添加我的答案，以提供有关 Flexbox 设置的更多信息。基本上我删除了所有 CSS 网格语法以支持 Flexbox。我不确定你到底要做什么，但这会让你了解如何让它至少工作。

#header {
  display: flex;
  background: gold;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

@media (max-width: 600px) {
  #header {
     flex-direction: column;
  }
}

#header>figure {
  justify-self: flex-start;
  align-self: center;
  max-height: 140px;
}

@media (max-width: 600px) {
  #header>figure {
    justify-self: center;
  }
}

#header>nav {
  justify-self: flex-end;
}

@media (max-width: 600px) {
  #header>nav {
    justify-self: center;
  }
}

这是我的工作 fiddle（您提供的代码笔 link 从未为我加载）。

这是一个非常好的资源，可以学习所有 Flexbox 规则的作用等

A Complete Guide to Flexbox

锚标签未正确居中

Anchor tags not centering properly

css

responsive-design