Как сохранить неупорядоченный список по центру экрана?

Question

У меня есть следующий неупорядоченный список внутри 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>

Я хочу, чтобы текст нижнего колонтитула оставался по центру экрана независимо от ширины окна. Как бы я сделал это с помощью CSS ??

Answer 1

#footer{
   text-align:center; 
}

Answer 2

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

Answer 3

Можно центрировать всплывающий список , используя также относительное позиционирование.

Answer 4

В этом руководстве частично описано, как это сделать.

Answer 5

Или

#footer_list {text-align:center;}

или

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