Question

我的版权页脚在我的网站上存在问题。我左边有两个图标（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 &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

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

- 编辑 -

以页脚为中心

#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 2

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 3

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

绝对的位置版权将起到作用，因为它将把它从流程中取出。

但不要忘记将父（页脚）设置为亲戚。所以它将包含其中的版权元素。

Answer 4

你没有 - 已经 - 绝对定位这项工作。只需向左浮动两列，设置宽度以确保它们不会超出容器，如果您有任何后续内容，则在最后清除浮动。非常简单，真的。

Answer 5

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

以下代码的工作示例：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;
}

使用CSS / HTML居中页脚

5 个答案:

以下代码的工作示例：HERE