我想将一个按钮置于页面底部:
<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中,则按钮位于页面底部但是......它不再是水平居中!!!谁知道为什么?非常感谢。
答案 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)
将left
和right
属性添加到footer
,并设置为0
:
footer {
clear: both;
height: 100px;
position: absolute;
bottom: 0;
/* add the following lines */
left: 0;
right: 0;
}
如果您添加width: 100%
(正如其他答案所示),您的footer
可能会因为任何额外的边距和/或填充而将页面展开。