Ortak bir altbilgi listesi, örneğin: temsil bağlantıları bir dizi var

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

Div içindeki her şeyi istiyorum#altbilgi yatay olarak ortalanmış. Eğer bir paragraf olsaydı, rahatlıkla söyleyebilirim: p { text-align: center; }. Ya da eğer <ul> genişliği bilseydim sadece #footer ul { width: 400px; margin: 0 auto; } diyebilirim.

Ama nasıl <ul> sabit bir genişlik ayarı olmadan sırasız liste öğeleri merkezi musunuz?

EDİT: açıklama - liste öğeleri yanyana, aşağıda olmalıdır.

Eğer liste öğeleri olabilir eğer çözüm display: inline oldukça basittir:

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

Ancak, birçok kez üzerinde display:block kullanmalısınız <li>ler. Aşağıdaki CSS, bu durumda çalışacak:

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }