使用 CSS/HTML 居中页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5942315/
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
Centering Footer With CSS/HTML
提问by Ricky
I have a problem centering the copyright footer on my website. I have two icons on the left (Facebook and Twitter), but if I add another for MySpace, it goes off. How can I fix this? Can it be indefinitely centered so I won't have to change it every time? Thanks.
我在我的网站上居中放置版权页脚时遇到问题。我在左边有两个图标（Facebook 和 Twitter），但是如果我为 MySpace 添加另一个图标，它就会熄灭。我怎样才能解决这个问题？它可以无限期地居中，这样我就不必每次都改变它吗？谢谢。
TEMPLATE:
模板：
<div id="footer">
<div class="social">
<ul>
<li><a href="http://www.facebook.com/DearRicky" target="_blank" title="Facebook"><img src="../images/icons/facebook.png" /></a></li>
<li><a href="http://www.twitter.com/DearRicky" target="_blank" title="Twitter"><img src="../images/icons/twitter.png" /></a></li>
</ul>
</div>
<div class="copyright">
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
</div>
<div class="clear"></div>
</div>
CSS:
CSS：
#footer {
margin: 0px auto;
padding-bottom: 60px;
width: 850px;
}
#footer .social {
float: left;
}
#footer .social ul {
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
}
#footer .social li {
float: left;
margin-right: 5px;
}
#footer .social img {
border: 0px;
}
#footer .copyright {
color: #fff;
float: left;
line-height: 32px;
margin-left: 200px;
margin-top: 10px;
text-align: center;
}
#footer .resize {
float: right;
width: 400px;
}
回答by Sam
By floating your copyright and not specifying a width, your "text-align:center;" rule has little effect. A floated element without a defined width shrinks to fit its content. What is giving you your perceived sense of center is your "margin-left:200px;" rule. It is pushing your copyright to the right of the bookmarks by 200px.
通过浮动您的版权而不指定宽度，您的“text-align:center;” 规则影响不大。没有定义宽度的浮动元素会缩小以适应其内容。什么给你你感知的中心感是你的“margin-left:200px;” 规则。它会将您的版权推向书签右侧 200 像素。
--edit--
- 编辑 -
Centered in footer
以页脚为中心
#footer { position:relative; width:850px; } /* position children relative to parent */
#footer .social { position:absolute; left:0; top:0 } /* take the bookmarks out of the flow and position in upper left corner of the footer */
#footer .copyright { text-align:center; } /* since bookmarks are out of normal flow, this div stretches entire length, so all you have to do is center it */
Centered in space to right of bookmarks
以书签右侧的空间为中心
#footer .social { float:left; width:200px; } /* give a specific width and float left */
#footer .copyright { float:left; width:650px; text-align:center; } /* center in remaining space */
回答by Mythical Fish
HTML
HTML
<div id="footer">
<div class="copyright">
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
</div>
<div class="social">
<ul>
<li><a href="http://www.facebook.com/DearRicky" target="_blank" title="Facebook"><img src="../images/icons/facebook.png" /></a></li>
<li><a href="http://www.twitter.com/DearRicky" target="_blank" title="Twitter"><img src="../images/icons/twitter.png" /></a></li>
<li><a href="http://www.myspace.com/DearRicky" target="_blank" title="MySpace"><img src="../images/icons/myspace.png" /></a></li>
</ul>
</div>
</div>
CSS
CSS
#footer {
margin: 0px auto;
width: 850px;
}
#footer .social {
padding: 30px 0;
width: 425px;
text-align: center;
}
#footer .copyright {
float: right;
padding: 30px 0;
width: 425px;
text-align: center;
}
回答by Zalaboza
#footer{position:relative}
#footer .copyright{position:absolute;top:10px;left:40%;}
position absolute the copyrights will do the trick as it will take it out of the flow.
绝对位置版权将起作用，因为它将使其脱离流程。
but dont forget to set parent(footer) to relative. so it would contain the copyright element inside it.
但不要忘记将父（页脚）设置为相对。所以它会在其中包含版权元素。
回答by bpeterson76
You don't --have-- to position absolute to make this work. Just left float both columns, set width to ensure they don't overrun the container, and clearfloat at the end if you have anything that will follow. Pretty easy, really.
您不必--必须-- 将绝对定位来完成这项工作。只是让两列浮动，设置宽度以确保它们不会超出容器，如果您有任何后续内容，则在最后清除浮动。很容易，真的。
回答by clairesuzy
To keep the text centered no matter what, take the list containing the social icons out of the flow, Absolutely position the social list relative to the footer, that way it has no bearing on the centering of the actual text
无论如何要保持文本居中，将包含社交图标的列表从流中取出，绝对将社交列表相对于页脚定位，这样它就不会影响实际文本的居中
Working example of the following code : HERE
以下代码的工作示例：此处
CSS:
CSS：
#footer {
margin: 0px auto;
padding-bottom: 60px;
width: 850px;
background: #444;
position: relative; /* so social list can be positioned relative to the footer*/
text-align: center; /* center the copyright text */
}
#footer .social {
position: absolute; /* position the list */
top: 0; /* adjust to suit */
left: 10px; /* adjust to suit */
}
#footer .social ul {
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
}
#footer .social li {
float: left;
margin-right: 5px;
}
#footer .social img {
border: 0px;
}
#footer .copyright {
/* no need to float so no need for the clearing div at the bottom of your HTML */
color: #fff;
line-height: 32px;
margin-top: 10px;
}
