Wie kann eine ungeordnete Liste mit unbekannter Breite horizontal zentriert werden?

Es ist üblich, dass eine Reihe von Links in einer Fußzeile in einer Liste dargestellt wird, z.

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

Ich möchte, dass alles in der div # -Fußzeile horizontal zentriert ist. Wenn es ein Absatz wäre, würden Sie einfach sagen : p { text-align: center; }. Oder wenn ich die Breite des wüsste, <ul>könnte ich einfach sagen#footer ul { width: 400px; margin: 0 auto; } .

Aber wie zentrieren Sie die ungeordneten Listenelemente, ohne eine feste Breite für das festzulegen? <ul> ?

BEARBEITEN: Klarstellung - Die Listenelemente sollten nebeneinander und nicht unten stehen.

Die Lösung, wenn Ihre Listenelemente sein können, display: inlineist ganz einfach:

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

Allerdings müssen Sie oft display:blockauf Ihrem <li>s verwenden. In diesem Fall funktioniert das folgende CSS:

#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%; }

Verwenden Sie das folgende CSS, um Ihr Problem zu lösen

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

Hinweis : Nicht float:leftin li verwenden. es wird dein li dazu bringen, sich links auszurichten.

Noch eine Lösung:

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

Dann springt ul beim Zoomen von Text nicht in die nächste Zeile.

Es hängt davon ab, ob Sie meinen, dass die Listenelemente unter dem vorherigen oder rechts vom vorherigen liegen, dh:

Home
About
Contact

oder

Home | About | Contact

Der erste, mit dem Sie einfach arbeiten können:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

Das zweite könnte so gemacht werden:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }

Versuchen Sie, die Liste in ein Div zu verpacken, und geben Sie diesem Div die Inline-Eigenschaft anstelle Ihrer Liste.

Die Antwort von philfreo ist großartig, es funktioniert perfekt (browserübergreifend, mit IE 7+). Fügen Sie einfach meine Exp für das Ankertag in li hinzu.

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }