Html 如何使页脚居中到页面底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15629511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make my footer center to the bottom of the page?
提问by Diallo Dickerson
I'm having trouble centering my footer to the bottom of the page. Here's my code
我无法将页脚居中放置在页面底部。这是我的代码
footer {
background-color: #FFF;
position:fixed;
bottom: 0px;
width: 400px;
text-align: center;
}
<footer align="center">
<p>March 25, 2</p>
</footer>
回答by Nasir Mahmood
Just set width to 100%
只需将宽度设置为 100%
width: 100%;
回答by jhunlio
Shabbir Lakdawalaanswer is one of your option but encase you have floatedelement inside your footerjust add 'div' wrapper
Shabbir Lakdawala 的答案是您的选择之一，但将floated元素包裹在您footer刚刚添加的“div”包装器中
html
html
<div class="footerWrap">
<div class="footer">
<div class="footerContent">
<p>Lorem Ipsum dolor</p>
</div>
</div>
</div>
css
css
.footerWrap {
width:100%;
position:fixed;
bottom: 0px;
}
.footer {
width:400px;
margin:auto;
}
.footerContent {
float:left;
width:100%;
background-color:#555;
padding:20px 0;
}
.footer p {float:left; width:100%; text-align:center; }
working demo
工作演示
回答by Shabbir Lakdawala
OR You can give your footer a container and apply this code:
或者你可以给你的页脚一个容器并应用这个代码：
HTML :
HTML :
<footer>
<div class="footer">
lorem ipsum dolor
</div>
<footer>
CSS:
CSS：
footer{
bottom: 0;
position: fixed;
width: 100%;
}
.footer {
background: blue;
height: 100px;
margin: auto;
width: 400px;
text-align:center;
padding:10px;
color:#ffffff;
}
Link to the Fiddle : http://jsfiddle.net/qdVbR/174/
链接到小提琴：http: //jsfiddle.net/qdVbR/174/
