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

70

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.

Philfreo
quelle

Antworten:

164

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%; }
Philfreo
quelle
Das ist toll. Ich habe nie daran gedacht, display: inline zu verwenden, um dies zu lösen.
Brett DeWoody
Wie wäre es mit display: inline-blockauf Ihrem <li>s? Sie können sie mit Textausrichtung zentrieren, und dennoch verhalten sie sich bei Bedarf wie ein Block.
Bis zum
34

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.

Yuvaraj
quelle
12

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.

Andrey
quelle
1
Ich fand dieses hier das Beste. Großartige Idee!
Kenton de Jong
Ich bin hierher zurückgekehrt, um dies ein zweites Mal zu benutzen, und wieder funktioniert es! Vielen Dank
Scott Dallas
Genau das suche ich. Vielen Dank!
R. Canser Yanbakan
8

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; }
Cletus
quelle
2

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

Martin Dale Lyness
quelle
0

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; } 
Jacky Nguyen
quelle
2
Dies könnte ein Kommentar zu der Antwort gewesen sein, die @philfreo gegeben hat.
Michael Reneer