时间戳

首页 > 解决方案 > 锚标签未正确居中

css - 锚标签未正确居中

问题描述

我目前正在创建一些页面作为 Free Code Camp CSS 挑战的一部分。

由于某种原因，一旦我在@media 激活时折叠网格，我的标签就无法正确居中。他们一直轻微地向右侧漂移。

完整笔的链接在这里：

https://codepen.io/alioshr/pen/KKPBPMr

我已经尝试过使用 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>

标签： cssresponsive-design

解决方案

我也会添加我的答案，以提供有关 Flexbox 设置的更多信息。基本上我删除了所有 CSS Grid 语法以支持 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;
  }
}

这是我的工作小提琴（您提供的 codepen 链接从未为我加载）。

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

Flexbox 完整指南

推荐阅读