我将如何将 flex 容器的中间文本居中？答案

【问题标题】：How would I go about centering the middle text of a flex container?我将如何将 flex 容器的中间文本居中？
【发布时间】：2019-05-27 09:24:31
【问题描述】：

我有这个：

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

【问题讨论】：

标签： html css flexbox centering

【解决方案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>

【讨论】：