使用 CSS/HTML 使页脚居中

Question

在我的网站上将版权页脚居中时出现问题。我在左边有两个图标（Facebook 和 Twitter），但如果我为 MySpace 添加另一个图标，它就会消失。我怎样才能解决这个问题？它可以无限期地居中，这样我就不必每次都改变它了吗？谢谢。

模板：

<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 &copy; 2011 Ricky Wai Kit Tsang.  All rights reserved.
    </div>
    <div class="clear"></div>
</div>

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

Answer 1

HTML

<div id="footer">
<div class="copyright">
    Copyright &copy; 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

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

Answer 2

通过浮动您的版权而不指定宽度，您的“text-align:center;”规则影响不大。没有定义宽度的浮动元素会缩小以适应其内容。让你感觉到中心感的是你的“margin-left:200px;”规则。它将您的版权推到书签右侧 200 像素。

--编辑--

在页脚居中

#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 */

在书签右侧的空间中居中

#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 */

Answer 3

无论如何要保持文本居中，将包含社交图标的列表从流中取出，将社交列表相对于页脚绝对定位，这样它就不会影响实际文本的居中

以下代码的工作示例：HERE

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

Answer 4

#footer{position:relative}
#footer .copyright{position:absolute;top:10px;left:40%;}

绝对位置，版权可以解决问题，因为它会将其排除在流程之外。

但不要忘记将父级（页脚）设置为相对。所以它里面会包含版权元素。

Answer 5

您不需要--必须--定位绝对来完成这项工作。只需将两列都浮动，设置宽度以确保它们不会超出容器，如果您有任何后续内容，请在最后清除浮动。很简单，真的。