Question

我有这个：

HTML：

myinput.style.cssText ='width:100%;height:100%;'

CSS：

  </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>

问题在于，页脚中的文本居中，但是下方伸缩栏中的“隐私”一词不是直接位于页脚文本下方。之所以稍微偏右，是因为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>

如何将Flex容器的中间文本居中？

1 个答案: