How to keep an unordered list centered within the screen?

问题

I have the following unordered list within a div:

<div id="footer">
    <ul>
        <li>Blog</li>
        <li>|</li> 
        <li>About Us</li> 
        <li>|</li> 
        <li>Privacy Policy</li> 
        <li>|</li> 
        <li>Copyright</li> 
        <li>|</li> 
        <li>Contact Us</li> 
        <li>|</li> 
        <li>Press Inquiries</li>
    </ul>
</div>

I want this footer text to stay centered in the screen no matter the width of the window. How would I do this using CSS??

回答1:

#footer{
   text-align:center; 
}

回答2:

Either

#footer_list {text-align:center;}

or

#footer_list {width:500px; margin:0 auto;}

回答3:

This tutorial describes, in part, how to do this.

回答4:

It's possible to center a floated list by using relative positioning too.

回答5:

ul {
    padding:0;
    margin:0;
}
li {
    width: 300px;
    margin: auto;
}

来源：https://stackoverflow.com/questions/1058754/how-to-keep-an-unordered-list-centered-within-the-screen