我将如何使 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将隐私一词居中？我是否必须证明内容：中心;只是隐私，然后添加填充？

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>