Jak wyśrodkować nieuporządkowaną listę o nieznanej szerokości?

Zazwyczaj zestaw linków w stopce jest reprezentowany na liście, na przykład:

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

Chcę, aby wszystko w stopce div # było wyśrodkowane w poziomie. Gdyby był to akapit, po prostu łatwo powiedzieć:p { text-align: center; }. Albo gdybym znał szerokość<ul> Mogłem po prostu powiedzieć#footer ul { width: 400px; margin: 0 auto; }.

Ale jak wyśrodkować nieuporządkowane elementy listy bez ustawiania stałej szerokości na<ul>?

EDYCJA: wyjaśnienie - elementy listy powinny być obok siebie, a nie poniżej.

questionAnswers(6)

yourAnswerToTheQuestion