时间戳

首页 > 解决方案 > 页脚导航未居中

css - 页脚导航未居中

问题描述

我无法让页脚导航正确居中。这很简单，但只是没有做它应该做的事情。

.main-footer li {
  float: left;
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
}
<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

我尝试在两个 CSS 选择器中添加display: block或添加display: inline-block，但没有帮助。有任何想法吗？

谢谢，凯特

标签： csscss-floattext-align

解决方案

首先。切勿float用于布局目的。它会弄乱你的内容，并在你的 CSS 中开始滚雪球效应。

flex是要走的路-> flexbox MDN（和其他链接）

用于垂直align-items: center对齐您的项目并水平对齐它们。justify-content: center

此外，使用box-sizing: border-box这样页脚的填充将被“包含”在它的100%宽度中，并且您在 x 轴上没有滚动溢出。

.main-footer li {
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
  display: inline-block;
}

.main-footer {
  display: flex;
  align-items:center;
  justify-content: center;
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
  box-sizing:border-box;
}
<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

推荐阅读