Web Style Sheets
CSS Tips & Tricks

Horizontale und vertikale Zentrierung

Eine oft gestellte Aufgabe ist das Zentrieren von Texten oder Bilder. Es existieren dafür drei Möglichkeiten der Zentrierung:

• Textzeilen zentrieren
• Einen Textblock oder ein Bild zentrieren
• Einen Block oder Bild vertikal zentrieren

Textzeilen zentrieren

Der am meissten gebrauchte und (von daher) einfachste Weg des Zentrierens ist das Zentrieren von Textzeilen in einem Absatz oder einer Überschrift. CSS bietet die Eigenschaft 'text-align' für diesen Zweck:

P { text-align: center }
H2 { text-align: center }

zentriert jede Zeile innerhalb eines P oder H2 Eementes, wie hier zu sehen:

Einen Textblock oder ein Bild zentrieren

Manchmal muss nicht der Text selbst zentriert werden, sondern vielmehr der gesamte Block inkl. des darin enthaltenen Textes. Oder anders ausgedrückt - wir möchten die rechten und linken margin Abstände gleich setzen. Um das zu erreichen vergeben wir den margin Eigenschaften den Wert 'auto'. Das wird normalerweise nur bei Blöcken fester Breite funktionieren da Blöcke mit automatischer Breite ebenso automatisch die gesamte verfügbare Breite des Anzeigebereiches für sich beanspruchen werden. Hier ein Beispiel:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">Dieser Beipiel...

Auf diese Weise können auch Bilder zentriert werden. Wir behandeln das Bild selbst als Blockelement und weisen ihm die entsprechenden margin Eigenschaften zu. Zum Beispiel:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Einen Block oder Bild vertikal zentrieren

CSS2 besitzt keine Eigenschaft um Elemente vertikal zu zentrieren. Eventuell wird es das in CSS3 einmal geben. Aber selbst in CSS2 können Sie Blöcke durch die geschickte Kombination von Eigenschaften vertikal zentrieren. Der Trick dabei ist das aussenliegende Blockelement als Tabellenzelle zu formatieren weil alle Inhalte einer Tabellenzelle vertikal zentriert werden können.

Das folgende Beispiel zentriert einen Absatz innerhalb eines Blocks welchem eine bestimmte Höhe zugewiesen wurde. Ein anderes Beispiel zeigt einen Absatz welcher im Browserfenster vertikal zentriert wurde da der aussenliegende Block die gesamte Höhe des Browserfensters einnimmt.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>Dieser kleine Absatz...
</DIV>