使用CSS / HTML居中页脚

Question

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

Answer 1

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.

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

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

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.

Answer 4

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.

Answer 5

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:

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