如何在网页上将页脚div居中显示

Question

我想让网页底部居中，并在其与上面的内容之间创建合理的间隔。目前，页脚与上面的内容有一条线和段落连接在一起。我可以将内容向下推，但是线条不会移动。我确定在我的CSS样式表中缺少某个属性。能否有人帮忙？

这是我的HTML标记：

<div id="footer">
   <p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div> 

哪个CSS属性可以解决这个问题？ 能否给个示例？ 谢谢。

- ibiangalex

---

能否让我们看到你的全部代码？如果我能看到代码，我相信我可以在5分钟内解决你的问题。 - Nealv

Answer 1

#footer{
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

- Farhad Ziaee

Answer 2

如何使 div 水平居中？通常使用 margin: 0 auto 或 margin-left: auto; margin-right: auto 进行设置。

如果想在其上方留白，则给它设定一个上边距。

- Bal

---

块级元素占据整个可用宽度，如果不指定宽度，就无法将它们居中，但可以使用文本：align:center;来使内联子元素居中。 - MatTheCat

大家好，请问有人能告诉我为什么页脚在一个页面上正常工作，而在另一个页面上它出现在网页中间并与数据混合吗？ - ibiangalex

你可能需要为那种情况创建一个单独的问题，并提供足够的解释。你也应该考虑接受这个问题的答案。 - Jawa

Answer 3

使用margin:auto来使用CSS居中块，使用margin-top或padding-top在其上方留出间隔：

#footer {
    margin-left:auto;
    margin-right:auto;
    margin-top:2em;
}

我已经将顶部边距设置为2em；如有需要，您可以随意更改它，甚至可以改为固定像素大小。您也可以使用padding-top来代替或与margin-top一起使用，具体取决于您需要实现的效果，但居中只能用margin left/right来完成，而不能用padding。

您还可以使用缩写的margin代码来压缩上述代码，这样可以让您在同一行代码中列出它们所有的属性：

#footer {
    margin: 2px auto 0 auto;
}

< p > （序列从上，右，下，左）

< p > 希望这能帮到你。

- Spudley

---

我还没有采纳这些新的建议，但是根据我之前提交的内容，我发现页脚在一个页面上是居中的，在另一个包含大量数据表格的页面上，页脚不在页面底部，而是在数据本身的中间位置。可能是什么原因导致的呢？ - ibiangalex

他可能想要将文本居中，而不是 div 本身。默认情况下，div 将占据整个宽度，因此只有在您还提供了宽度的情况下才有意义。 - Joeri Hendrickx

我使用了以下代码:#footer { 宽度: 920像素; 高度: 100像素; 边距: 0 自动; 顶部边距: 2em; 填充: 0; 上边框: 1像素实心 #； }#footer p { 边距: 1; 填充: 30像素0像素0像素0像素; 文本对齐: 中心; 行高: 正常; 字体大小: 12像素; } - ibiangalex

Answer 4

我用以下方法解决了这个问题：

#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px; 
left: 0px; 
text-align: center; 
}

- ibiangalex

Answer 5

您可以使用以下CSS将文本居中。

#footer {
  margin: 0 auto;
}

如果您想在顶部添加更多空间，请添加以下代码：

margin-top: 2em;

在前一个边距线之后。请注意，顺序很重要，因此如果您首先使用margin-top，它将被margin规则覆盖。

---

可以使用更多的空白垂直间距来放置在页脚上方

padding-top: 2em;

margin和padding的区别可以在W3C的CSS2盒模型中了解。主要的区别是margin会在div元素的边框上方留出空间，而padding则会在div内部留出空间。使用哪个属性取决于其他页面元素的属性。

- Jawa

---

margin-top和padding-top有什么不同吗？在这种情况下，padding-top不是更适用吗？ - Anurag

边距是在 #footer 元素外部，内边距是在其内部。 - Mark Chorley

Answer 6

我使用了这段代码来实现底部版权信息。

.footer-copyright {
    padding-top:50px;
    display: table;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

- Hasan Batuhan Kurt

Answer 7

    #Panel01 {

    vertical-align:bottom;
    bottom: 0;
     margin-left:auto;
     margin-right:auto;
     width: 400px;
    height: 100px;
}

注意：

• #Panel1是一个DIV的ID，上述代码是CSS。
• 重要的是，DIV足够大，可以容纳其中的项目。

- Fred Grainger

Answer 8

#footer{
text-align:center
}

- nerkn

---

那将是#footer - 这个div具有ID为footer，而不是类。 - Mark Chorley

所有这样做的只是对齐文本，而不是 div 本身。 - Dan Hanly

Answer 9

.copyright {
    margin: 10px auto 0 auto;
    width: 100%;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    text-align: center;
    color: #ccbd92;
    border-top: 1px solid #ccbd92;
}

- aa04