如何在页面上居中页脚div

I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?

我想以我的网页页脚为中心,并在它与上述内容之间创造一个合理的噱头。目前,页脚有一行和段落连接到上述内容。我可以按下内容但线条不会移动。我确信我错过了我的css样式表中的属性。有人可以帮忙吗?

This is my html mark up:

这是我的html标记:

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

Which css property can I use to solve this problem? A sample would be appreciated. Thanks.

我可以用哪个css属性来解决这个问题?一个样本将不胜感激。谢谢。

7 个解决方案

#1

Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto, margin-right: auto.

水平居中div?通常通过设置margin:0 auto或margin-left:auto,margin-right:auto来完成。

And if you want a gap above it, give it a top margin.

如果你想要一个高于它的差距,给它一个上限。

#2

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

#3

Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:

使用margin:使用CSS自动中心块,并使用margin-top或padding-top在其上方留出空白:

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

I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.

我用2em作为最高保证金;您可以随意更改它,如果您愿意,也可以根据固定的像素大小进行更改。您也可以使用填充顶部以及代替margin-top,具体取决于您需要实现的内容,尽管只能通过左/右边距而不是填充来完成居中。

The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:

上面的代码可以使用速记边距代码压缩,这使您可以在同一行代码中列出它们:

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

(sequence is top, right, bottom, left)

(序列是顶部,右侧,底部,左侧)

hope that helps.

希望有所帮助。

#4

I solved it with this:

我解决了这个问题:

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

#5

You can center the text with the following CSS

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

#footer {
  margin: 0 auto;
}

If you want more space on top add

如果你想在顶部添加更多空间

margin-top: 2em;

after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.

在上一个保证金线之后。请注意,订单很重要,因此,如果您首先获得保证金,则会被保证金规则覆盖。

More empty vertical spacing above the footer can also be made using

页脚上方的空垂直间距也可以使用

padding-top: 2em;

The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.

关于W3C的CSS2盒子模型,可以读取边距和填充之间的差异。重点是边距使div空间位于div元素的边界之上,因为填充会在div中创建空间。使用哪个属性取决于其他页面元素的属性。

#6

-1

#footer{
text-align:center
}

#7

-1

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

#1