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

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

.centerContent {
    text-align: center;
}

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

Answer 2

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

Answer 3

尝试向页脚添加宽度：100％

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

position：绝对会使页脚默认丢失它的宽度。

Answer 4

将left和right属性添加到footer，并设置为0：

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

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

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