Elemente mit CSS zentriert und mittig ausrichten

Gelegentlich stellt einen Webgestaltung vor einige Probleme. Darunter zum Beispiel die perfekte mittige und zentrierte Ausrichtung von Objekten. Nehmen wir mal an, wir wollen ein Quadrat mit einem Text versehen und dieser soll zentriert und mittig erscheinen. Mit mittig meine ich wirklich im Zentrum, also vertikal als auch horizontal positioniert. Im einfachsten Falle verschiebt man den Text via top, left bzw. margin. Allerdings haben diese Lösungsansätze eventuell den Nachteil, dass das Objekt nicht in allen Browsern korrekt platziert wird, so beispielsweise bei Android-Geräten. Dort erscheint die Schrift verschoben, anstatt sie in der Mitte darzustellen. Nachfolgend habe ich für euch zwei kleine Beispiele, mit denen ihr Inhalte zentral anordnen könnt.

Beispiel 1 — der Trick mit der Zeilenhöhe

Das erste Beispiel macht sich einen sehr simplen Trick zunutze. Wir gehen davon aus, dass das Viereck eine feste Höhe besitzt. Entsprechend definiert man die Zeilenhöhe gleichhoch. Dadurch rutscht der Inhalt punktgenau ins Zentrum des Quadrats, jedoch nur horizontal. Die Vertikale ist schnell erledigt: text-align:center;. Diese Methode hat aber einen entscheidenden Haken, mehrzeiligen Text kann man damit nicht ausgeben. Weitere Zeilen würden aufgrund der Zeilenhöhe, die gleich der Container-Höhe ist, aus dem Kasten geschoben.

Text
<div>Text</div>
div {
	height:100px;
	width:100px;
	background:#2B5AB6;
	color:#FFFFFF;
	font-size:12pt;
	text-align:center;
	line-height:100px
	}

Beispiel 2 — der Container mutiert zur Tabellenzelle

Beispiel Nummer Zwei verfolgt einen anderen Ansatz. Die vertikale Ausrichtung über CSS klappt beispielsweise in Tabellen etc., aber keineswegs bei Containern. Dank eines Kniffs gelingt es trotzdem. Man setzt einfach display:table-cell; und anschließend vertical-align:middle;. Die Positionierung erfolgt wie im ersten Beispiel und text-align:center; erledigt den Rest. Diese Lösung hat nur einen Nachteil. Um den Außenabstand des Konstrukts via margin anzupassen braucht man ein weiteres Block-Element (div) drum herum. Da hier keine Zeilenhöhe definiert wird, klappt das Darstellen von mehrzeiligen Texten wunderbar.

Zeile 1
Zeile 2
<div>Zeile 1<br>Zeile 2</div>
div {
	height:100px;
	width:100px;
	background:#2B5AB6;
	color:#FFFFFF;
	font-size:12pt;
	text-align:center;
	display:table-cell;
	vertical-align:middle
	}

Der Einsatzzweck bestimmt die Lösung

Beide Methoden führen fast zum gleichen Ergebnis. In nahezu allen Browsern erscheint der Text nun genau in der Mitte des Containers. Bei den angesprochenen Nachteilen sollte man allerdings gut überlegen. Beispiel 1 ist meines Erachtens deutlich simpler, jedoch eher für einzeiligen Text geeignet. Für mehrzeilige Inhalte bietet sich hingegen Lösung 2 an, zumal das Objekt bei Höhenveränderung auch sofort mitzieht. Im Falle von Alternative 1 müsste zusätzlich die Zeilenhöhe entsprechend angeglichen werden. Der Anwendungszweck entscheidet, welches der beiden Beispiele zum Tragen kommt.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

1 Kommentar

Du kannst diesen Artikel nicht mehr kommentieren.

  1. Kommentar von Dirk Rathjens · · #

    Super! So lange gesucht und jetzt endlich gefunden, der Trick mit display: table-cell. Verschönert bei mir jetzt ein nav mit ein- und zweizeiligen Links. Vielen Dank!