Wie zentriere ich eine ungeordnete Liste unbekannter Breite in CSS?

Zentrieren einer ungeordneten Liste unbekannter Breite

Im Webdesign ist es zur einfachen Navigation üblich, eine ungeordnete Liste von Links in einer Fußzeile zu haben. Wenn jedoch die Breite der Liste unbekannt ist, kann es schwierig sein, die Listenelemente horizontal zu zentrieren.

Eine Lösung für Listen, bei denen die Elemente inline angezeigt werden können, ist:

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

Dadurch wird die Textausrichtung zentriert auf die Fußzeile angewendet, der standardmäßige Listenstil entfernt und die Listenelemente so eingestellt, dass sie als Inline-Elemente angezeigt werden.

In Fällen, in denen Listenelemente jedoch als Blöcke angezeigt werden müssen, wird der folgende CSS-Code verwendet kann verwendet werden:

<code class="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%; }</code>

Dieser Ansatz stellt die Fußzeile auf die volle Breite ein und verbirgt etwaige Überläufe. Die ungeordnete Liste wird absolut positioniert, nach links verschoben und dann um 50 % nach links verschoben. Die Listenelemente werden ebenfalls absolut positioniert, nach links verschoben und um 50 % nach rechts verschoben. Dadurch wird die ungeordnete Liste effektiv horizontal zentriert, unabhängig von ihrer Breite.

Das obige ist der detaillierte Inhalt vonWie zentriere ich eine ungeordnete Liste unbekannter Breite in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!