使用 CSS/HTML 居中页脚 [英] Centering Footer With CSS/HTML

问题描述

我在我的网站上居中放置版权页脚时遇到问题.我在左边有两个图标(Facebook 和 Twitter)，但是如果我为 MySpace 添加另一个图标，它就会熄灭.我怎样才能解决这个问题?它可以无限期地居中，这样我就不必每次都改变它吗?谢谢.

模板:

<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>
<div class="版权">版权&copy;2011 曾伟杰.版权所有.

<div class="clear"></div>

CSS:

#footer {边距:0px 自动；填充底部:60px；宽度:850px；}#footer .social {向左飘浮;}#footer .social ul {列表样式:无；边距:10px 0px 0px；填充:0px；}#footer .social li {向左飘浮;右边距:5px；}#footer .social img {边框:0px；}#footer .copyright {颜色:#fff;向左飘浮;行高:32px；左边距:200px；边距顶部:10px；文本对齐:居中；}#footer .resize {浮动:对；宽度:400px；}

解决方案

HTML

<div class="版权">版权&copy;2011 曾伟杰.版权所有.
<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>

CSS

#footer {边距:0px 自动；宽度:850px；}#footer .social {填充:30px 0;宽度:425px；文本对齐:居中；}#footer .copyright {浮动:对；填充:30px 0;宽度:425px；文本对齐:居中；}

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.

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

解决方案

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

这篇关于使用 CSS/HTML 居中页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！