Es común tener un conjunto de enlaces en un pie de página representado en una lista, como por ejemplo:

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Quiero que todo dentro de div # footer esté centrado horizontalmente. Si fuera un párrafo, simplemente dirías:p { text-align: center; }. O si supiera el ancho de la<ul> Solo pude decir#footer ul { width: 400px; margin: 0 auto; }.

Pero, ¿cómo centrar los elementos de la lista desordenados sin establecer un ancho fijo en el<ul>?

EDITAR: aclaración: los elementos de la lista deben estar uno junto al otro, no a continuación.