3

我正在将一个网站重写为 HTML5，并且在将页脚内容居中时遇到了一些问题。

我的页脚 HTML 非常简单

<footer> Copyright </footer>

而CSS是

footer {
    margin: auto;
    height: 330px;
    background-color: #1e2127;
    color: #ffffff;
}

但内容不以页面的其余部分为中心。

我错过了什么？

编辑：
我不想将页脚内的文本居中，只有页脚本身（因此它将与页面的其余部分对齐），但我希望背景填充整个页面。

4

6 回答 6

3

您没有为页脚指定宽度，这意味着它将默认为 100%，文本左对齐。添加 text-align: center 以使文本居中，或添加宽度以使整个页脚居中。

于 2012-08-23T12:28:27.127 回答
3

希望这是你想要的演示

footer {
    margin: auto;
    height: 330px;
    background-color: #1e2127;
    color: #ffffff;
    text-align:center; //to align the text in center
}​
于 2012-08-23T12:26:49.003 回答
3

我假设您希望页脚水平居中，在这种情况下margin: auto;需要指定的宽度自动居中：

footer {
  margin: auto;
  width: 960px;
  /* other styles */
}
于 2012-08-23T12:26:56.550 回答
1

您缺少text-align:center使内容中心对齐。

于 2012-08-23T12:27:10.087 回答
1

像这样设置：

<footer><span>Copyright<span></footer>

和CSS：

footer {
    margin: auto;
    height: 330px;
    width: 100%;
    background-color: #1e2127;
    color: #ffffff;
}

footer span {
    display:block;
    width: 50%;
    margin: 0 auto;
    text-align: center;
}
于 2012-08-23T12:27:19.600 回答
1 
footer {
    margin: 0 auto;
    height: 330px;
    background-color: #1e2127;
    color: #ffffff;
}

如果父容器有一些宽度，margin: 0 auto 将起作用，否则您可以尝试放置text-align:center;

于 2012-08-23T12:27:33.013 回答