对齐以网页底部为中心的文字

Question

footer {
  position: absolute;
  bottom: 8px;
  text-align: center;
}

我希望页脚位于网页底部，但位置似乎覆盖了text-align。

Answer 1

footer元素是block元素。块元素占据了它所在容器的整个宽度。

但是，当块元素设置为position: absolute或position: fixed时，它会缩小到可以获得的最小值。默认情况下，它与页面左侧对齐。

只需将此款式添加到footer：

即可

left: 0;
right: 0;

Answer 2

如果您想将<footer>元素本身居中，那么您可以这样做。

<强> JsFiddle Demo

footer {
    position: absolute;
    bottom: 8px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: aqua;
}

<footer>footer</footer>

如果您只需将文字居中，只需将width:100%添加到footer，您还应添加遗失的left:0。

<强> JsFiddle Demo

footer {
    position: absolute;
    left: 0;
    bottom: 8px;
    text-align: center;
    width: 100%;
    background: aqua;
}

<footer>footer</footer>