html - 我该如何将 flex 容器的中间文本居中？

Question

我有这个:

HTML:

  </div class="container">
    <footer>Maximilian Crosby ©</footer>
  </div>
  <div class="bot-bar" >
    <a href="./contact-us.html">Contact us</a>
    <a href="./contact-us.html">Privacy</a>
    <a href="./contact-us.html">Legal</a>
  </div>

CSS:

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 200px 10fr 1fr;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

footer  {
  grid-area: footer;
  margin: 1em 0 0 0;
}

.bot-bar  {
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 1em 0 1em 0;
}

问题是页脚中的文本位于中央，但下面的 flex 栏中的“隐私”一词并不位于页脚文本的正下方。它稍微向右偏了一点，因为显然 Flex 正在将三个 Flex 元素集中在 Flex 容器中。

我如何使用 Flex 将“隐私”一词居中？ 我是否必须证明内容合理:中心；只是隐私然后添加填充？

Answer 1

编辑:实际上，为了保持良好的实践，您应该将类​​添加到 a 元素。

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 200px 10fr 1fr;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

footer  {
  grid-area: footer;
  margin: 1em 0 0 0;
  text-align: center;
}

.bot-bar  {
  display: flex;
  flex-flow: wrap;
  flex: 0 1 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 1em 0 1em 0;
}

.bot-bar__link{
  flex: 1;
  text-align: center;
}

 </div class="container">
    <footer>Maximilian Crosby ©</footer>
  </div>
  <div class="bot-bar" >
    <a class="bot-bar__link" href="./contact-us.html">Contact us</a>
    <a class="bot-bar__link" href="./contact-us.html">Privacy</a>
    <a class="bot-bar__link" href="./contact-us.html">Legal</a>
  </div>