如何使页脚居中到页面底部？答案

【问题标题】：How can I make my footer center to the bottom of the page?如何使页脚居中到页面底部？
【发布时间】：2013-03-15 19:15:14
【问题描述】：

我无法将页脚置于页面底部的中心。这是我的代码

footer {
background-color: #FFF;
position:fixed;
bottom: 0px;
width: 400px;
text-align: center;
}
<footer align="center">
    <p>March 25, 2</p>
</footer>

【问题讨论】：

您能否提供整个页面的代码，或者至少提供更多的代码？例如，如果有的话，你的页脚是用什么包裹的？
您希望页脚的容器居中，或者什么页脚标签居中？试着给出你想要的样子。
“将我的页脚居中到页面底部”是指居中 text 还是居中 container ？还是两者兼而有之？
我想把容器居中

标签： html css web center footer

【解决方案1】：

Shabbir Lakdawala 答案是您的选择之一，但在您的footer 中包含floated 元素只需添加“div”包装器

html

<div class="footerWrap">
    <div class="footer">
      <div class="footerContent">
        <p>Lorem Ipsum dolor</p>
      </div>     
    </div>
</div>

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; }

工作demo

【讨论】：

【解决方案2】：

或者你可以给你的页脚一个容器并应用这个代码：

HTML：

<footer>
    <div class="footer">
    lorem ipsum dolor
    </div>
<footer>

CSS：

footer{
    bottom: 0;
    position: fixed;
    width: 100%;
}

.footer {
    background: blue;
    height: 100px;
    margin: auto;
    width: 400px;
    text-align:center;
    padding:10px;
    color:#ffffff;
}

小提琴链接：http://jsfiddle.net/qdVbR/174/

【讨论】：

【解决方案3】：

只需将宽度设置为 100%

width: 100%;

【讨论】：

欢迎您，如果您找到了答案，请接受。