Question

在居中的情况下，如何将页脚固定在页面底部？我一辈子都想不通。

我希望页脚位于页面中央的底部50％，但是由于某些原因，左右边距无法正常工作。它坐在左边。

.navigation2 {
  padding: 8px;
  background-color: #888;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  bottom: 0px;
}

<footer>
  <div class="navigation2">
    &copy; 2019 - <a href="index.html">X</a>
  </div>
</footer>

任何帮助将不胜感激。

Answer 1

您可能只需要一些不同的数学方法即可。这可以使您更接近所需的内容：

CSS：

.navigation2 {
    padding: 8px;
    background-color:#888;
    left: 25%;
    right: 25%;
    position: fixed;
    bottom: 0px;
}

您可以通过另一种方法来做到这一点，即它更具动态性（不管页脚的宽度如何都可以工作），并且缩放效果更好，因此在小屏幕上，页脚不会受到太多挤压：

.navigation2 {
    padding: 8px;
    background-color:#888;
    left: 50%;
    transform:translatex(-50%);
    position: fixed;
    bottom: 0px;
}

将页脚固定到页面底部

1 个答案: