html - Html 页脚内容不居中

Question

我想在页面底部居中一个按钮：

<footer>
    <div class="centerContent">
        <input name="submit" type="submit" />
    </div>
</footer>

CSS：

.centerContent {
    text-align: center;
}

footer {
    clear: both;
    height: 100px;
    position: absolute;
    bottom: 0;
}

如果我删除 Css 的“页脚”部分，按钮当然不在页面底部，但至少它在页面的水平中心。如果我将“页脚”部分留在 Css 中，则该按钮位于页面底部，但......它不再水平居中！！！有人知道为什么吗？非常感谢。

score 2 · Accepted Answer

对于水平对齐，您应该将页脚拉伸到全宽。添加width:100%到footer样式。

.centerContent {
    text-align: center;
}

footer {
    clear: both;
    height: 100px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

score 0 · Accepted Answer

将left和right属性添加到您的footer中，均设置为0：

footer {
    clear: both;
    height: 100px;
    position: absolute;
    bottom: 0;

    /* add the following lines */
    left: 0;
    right: 0;
}

如果您width: 100%改为添加（如其他答案所示），您footer可能会因为任何额外的边距和/或填充而将页面展开。

score 0 · Accepted Answer

footer {
bottom: 0;
clear: both;
height: 100px;
position: absolute;
text-align: center;
width: 100%;
}

score 0 · Accepted Answer

尝试将 width:100% 添加到页脚

footer {
  width: 100%;
  clear: both;
  height: 100px;
  position: absolute;
  bottom: 0;
}

position: absolute 将使页脚默认失去它的宽度。

4 回答 4