Html页脚内容不居中

时间:2013-10-22 10:06:12

标签: html css

我想将一个按钮置于页面底部:

<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中,则按钮位于页面底部但是......它不再是水平居中!!!谁知道为什么?非常感谢。

4 个答案:

答案 0 :(得分:2)

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

.centerContent {
    text-align: center;
}

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

尝试向页脚添加宽度:100%

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

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

答案 3 :(得分:0)

leftright属性添加到footer,并设置为0

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

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

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