Question

我正在将网站重新编写为HTML5，而且我在处理页脚内容方面存在一些问题。

我的页脚HTML非常简单

<footer> Copyright </footer>

和css是

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

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

我错过了什么？

修改
我不想将文本居中在页脚内部，只是它自己的页脚（因此它将与页面的其余部分对齐），但我希望背景填写整个页面。

Answer 1

希望这是你想要的demo

footer {
    margin: auto;
    height: 330px;
    background-color: #1e2127;
    color: #ffffff;
    text-align:center; //to align the text in center
}

Answer 2

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

footer {
  margin: auto;
  width: 960px;
  /* other styles */
}

Answer 3

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

Answer 4

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

Answer 5

像这样设置smth：

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

Answer 6

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

margin：如果父容器有一些宽度，则0将自动运行否则你可以尝试放text-align:center;

使用html5中的css将页脚内容居中

6 个答案: