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 中，该按钮位于页面底部，但是......它不再水平居中!!!有人知道为什么吗？非常感谢。

Answer 1

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

.centerContent {
    text-align: center;
}

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