Immer mal wieder kommt die Frage auf, wie Aufzählungslisten (ul) im Elternelement mittig ausgerichtet werden können, insbesondere wenn es um eine horizontale Navigation geht. In diesem Beitrag zeige ich mehrere Möglichkeiten, wie eine Aufzählungsliste horizontal zentriert werden kann.

Aufzählungsliste zentriert

Die Zentrierung von Blockelementen ist eigentlich nicht weiter schwierig, wenn wir die Breite des zu zentrierenden Elements kennen. Dann können wir das Element über die Angabe eines automatischen seitlichen Außenabstands (margin) mittig anordnen:

ul {
	width: 218px;
	margin: 0 auto;
	padding: 0;
}

Leider ist das bei dynamischen Navigationsmenüs etwas schwierig. Wir müssten die Breite der Listenelemente, den Außen- und Innenabstand und gegebenenfalls noch Rahmenlininen addieren. Und sollte sich eine Bezeichnung ändern, ein Listenelement ergänzt oder entfernt werden, müsste wir die Breite erneut berechnen. Ziemlich aufwendig, oder?

Das geht einfacher. Mir fallen da ganz spontan zwei Lösungen ein. Beginnen wir aber zunächst mit der HTML-Struktur unserer Liste

<div class="nav">
	<ul>
		<li>New York</li>
		<li>Rio</li>
		<li>Tokyo</li>
	</ul>
</div>

Für dieses Bespiel deklarieren wir die Eigenschaften der Elemente wie folgt:

.nav {
	float: left;
	width: 400px;
	padding: 20px 0;
	background: orange;
	color: #000;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	float: left;
	list-style: none;
	margin-right: 10px;
	padding: 5px 10px;
	background: #fff;
}

Schauen wir uns das Ergebnis im Browser an:

Aufzählungsliste nicht zentriert

Um die Liste zu zentrieren, habe ich folgende Möglichkeiten:

Listenelemente als Inline-Element definieren

Ein Listenelement (li) ist von Haus aus ein Blockelement, hat also die gleiche Breite, wie das Elternelement. Aus diesem Grund werden Listenelemente auch gefloatet, um sie horizontal anordnen zu können.

Wenn wir dem Listenelment nun aber sagen, dass es ein Inline-Element zu sein hat, können wir auf das floaten verzichten und die Listenelemente positionieren sich nebeneinander. Und wenn wir darüber hinaus die Textausrichtung der Aufzählungsliste (ul) zentrieren,

ul {
	text-align: center;
	margin: 0;
	padding: 0;
}

li {
	display: inline;
	list-style: none;
	margin-right: 10px;
	padding: 5px 10px;
	background: #fff;
}

bekommen wir unsere Liste auch schon zentriert.

Aufzählungsliste zentriert

Relativ positionieren und Elemente verschieben

Zweite Möglichkeit: wir positionieren die Aufzählunsgsliste (ul) sowie die Listenelemente (li) relativ und floaten sie.

Durch die relative Positionierung können wir die Startposition der Elemente verändern. Wir verschieben die Aufzählunsgsliste um 50% nach links und die der Listenelemente um 50% nach rechts:

ul {
	position: relative;
	float: left;
	left: 50%;
	margin: 0 auto;
	padding: 0;
}

li {
	position: relative;
	float: left;
	right: 50%;
	margin-right: 10px;
	padding: 5px 10px;
	background: #fff;
	list-style: none;
}

und bekommen eine wunderschön zentrierte Aufzählungsliste.