Html 如何在网页上居中页脚div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4012872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to center a footer div on a webpage
提问by ibiangalex
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 属性来解决这个问题？样品将不胜感激。谢谢。
采纳答案by Bal
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.
如果你想在它上面有一个间隙，给它一个上边距。
回答by Farhad Ziaee
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
回答by Spudley
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
使用 margin:auto 将带有 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 作为上边距；随意更改它，如果您愿意，甚至可以更改为固定的像素大小。您还可以使用 padding-top 以及或代替 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.
希望有帮助。
回答by ibiangalex
I solved it with this:
我用这个解决了它：
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
回答by Jawa
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-topfirst it gets overwritten by marginrule.
在前一条边际线之后。请注意，顺序很重要，因此如果您margin-top先拥有它，它会被margin规则覆盖。
More empty vertical spacing above the footer can also be made using
页脚上方的更多空白垂直间距也可以使用
padding-top: 2em;
The difference between marginand paddingcan be read about W3C's CSS2 box model. The main point is that marginmakes space above the divelement's border as paddingmakes space insidethe div. Which property to use depends from other page elements' properties.
可以阅读W3C 的 CSS2 盒模型margin和之间的区别。要点是在元素边框上方留出空间，就像在. 使用哪个属性取决于其他页面元素的属性。paddingmargindivpaddingdiv
回答by Hasan Batuhan Kurt
I used this code for bottom copyright.
我将此代码用于底部版权。
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
回答by aa04
.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;
}
回答by nerkn
#footer{
text-align:center
}
