How to keep an unordered list centered within the screen??

Question

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??

Answer 1

#footer{
   text-align:center; 
}

Answer 2

Either

#footer_list {text-align:center;}

or

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

Answer 3

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

Answer 4

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

Answer 5

Does this work?

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