Elemente auf einer Webseite zentrieren

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Teile der Webseite sollen zentriert dargestellt werden, wie in der nächsten Abbildung gezeigt.

Zentrierte Überschriften

Abbildung: Zentrierte Überschriften.

Lösung

Verwenden Sie die Eigenschaft text-align, um den Text in einem Block-Level-Element zu zentrieren:

h1, h2, h3 {
 text-align: center;
}

Diskussion

Mit Hilfe der Eigenschaft text-align können Sie Text in Block-Level-Elementen zentriert darstellen. In unserem Beispiel erstreckt sich die Überschrift über die gesamte Breite des body-Elements. Solange Sie dem Element jedoch keine Hintergrundfarbe oder einen Rahmen zuweisen, ist dieser Effekt kaum sichtbar. In der folgenden Abbildung können Sie die tatsächliche Breite der zentrierten Elemente besser erkennen.

Graue Hintergrundfarbe verdeutlicht tatsächliche Breite des Elements

Abbildung: Die graue Hintergrundfarbe verdeutlicht die tatsächliche Breite des Elements.

Alternativ dazu können Sie den Text durch die Verwendung von Außenabständen in seinem Elternelement zentrieren:

h1, h2, h3 {
 margin-left: auto;
 margin-right: auto;
}

Wie Sie sehen, werden hier die Eigenschaften margin-left und margin-right für die Zentrierung im Elternelement auf den Wert auto gesetzt. Leider wird diese Methode von älteren Browsern nicht korrekt umgesetzt. Für einzelne Situationen sind also gegebenenfalls spezielle Lösungen nötig.

Tabellen

Um eine Tabelle zu zentrieren, legen Sie die Tabelle als Kindelement eines div-Elements an:

<div class="center">
  <table width="50%" border="1" cellpadding="30">
    <tr>
      <td>Dies ist die erste Zelle</td>
      <td>Dies ist die zweite Zelle</td>
    </tr>
    <tr>
      <td>Dies ist die dritte Zelle. Sie befindet sich unter der ersten Zelle.</td>
      <td>Dies ist die vierte Zelle. Sie befindet sich unter der zweiten Zelle.</td>
    </tr>
  </table>
</div>

Als Nächstes schreiben Sie die folgende CSS-Regel:

.center {
  text-align: center;
}
.center table {
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}

Das Setzen der Außenabstände auf den Wert auto funktioniert zwar in neueren Browserversionen, nicht jedoch in Internet Explorer 5 für Windows. Damit auch dieser Browser das Richtige tut, verwendet der Klassenselektor center in unserem Beispiel die text-align-Methode. Allerdings wird dadurch auch der Inhalt der Tabellenzellen zentriert. Um diesem Effekt entgegenzuwirken, verwenden Sie den Selektor für Nachfahren, .center table, wodurch Sie dem Zellinhalt eine eigene Ausrichtung geben können.

Beachten Sie außerdem, dass th-Elemente in einer HTML-Tabelle standardmäßig zentriert werden. Das können Sie verhindern, indem Sie im Nachfahren-Selektor die Eigenschaft text-align auf den Wert left setzen. Um den Inhalt innerhalb einer Tabellenüberschrift (th) links auszurichten, benutzen Sie die folgende CSS-Regel:

th {
 text-align: left;
}

Sie können ein paar Zeilen CSS sparen, indem Sie stattdessen die Kurzschrift-Version der Eigenschaft margin verwenden, wie unten zu sehen ist (diese Methode funktioniert in den meisten Browsern außer in Internet Explorer 5 für Macintosh):

.center table {
 margin: 0 auto;
 text-align: left;
}

Bilder

Um ein Bild auf der Seite zu zentrieren, umgeben Sie es zuerst mit einem div-Element. Diese Technik ist notwendig, weil img-Elemente – genauso wie em und strongInline-Elemente sind. Inline-Elemente werden im Textfluss der Seite angeordnet. Block-Elemente wie p oder blockquote beanspruchen dagegen ihren eigenen Platz. Der Markup-Code sieht etwa so aus:

<div class="flagicon"><img src="flag.gif" alt="Flag" width="160" height="60" /></div>

Und hier die entsprechende CSS-Regel:

.flagicon {
 text-align: center;
}

Um Elemente mit festen Breiten zu zentrieren, setzen Sie zuerst den Wert der Eigenschaft padding-left des Elternelements auf 50%. Danach ermitteln Sie die Hälfte der Breite des Elements, das zentriert werden soll. Diese Zahl wird als negativer Wert für die Eigenschaft margin-left verwendet. Dadurch wird verhindert, dass die linke Seite des Elements auf der 50%-Linie dargestellt wird, die durch den Außenabstand definiert wird, und das Bild wird in die Seitenmitte verschoben. Der Markup-Code für ein Bild in einer Webseite, die diese Technik verwendet, sieht in etwa so aus:

<img src="wolf.jpg" width="256" height="192" alt="Bild von einem Wolf">

Die entsprechende CSS-Regel sehen Sie hier (siehe nächste Abbildung):

body {
 padding-left: 50%;
}
img {
 /* entspricht der Hälfte der negativen Bildbreite */
 margin-left: -138px;
}

Bild ohne veraltetes Element center in Seitenmitte zentrieren

Abbildung: Ein Bild ohne das veraltete Element center in der Seitenmitte zentrieren.

Eine weitere Möglichkeit, ein Bild zu zentrieren, besteht in der Anpassung der Werte für die Eigenschaften display und margin. Allerdings ist dieses Verfahren nicht rückwärtskompatibel mit Internet Explorer 5 für Windows.

Weisen Sie dem Bild zuerst ein class-Attribut zu:

<img src="flag.gif" alt="Flag" width="160" height="60" class="blockimg" />

Danach legen Sie die entsprechenden CSS-Regeln an, die das Bild zentrieren:

.blockimg {
 display: block;
 margin: 0 auto;
}

Vertikale Zentrierung

Nachdem das Element bereits horizontal zentriert wurde, können Sie diese Technik noch weiter treiben und das Bild (oder ein anderes Element) auch vertikal zentrieren. Der Unterschied zum vorigen Beispiel besteht in der zusätzlichen Verwendung der Eigenschaft position. Der Markup-Code ist der gleiche wie für das Bild aus dem vorigen Beispiel, während die CSS-Regel nur für einen Selektor gilt (siehe nächste Abbildung):

img {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -96px;
 margin-left: -138px;
 height: 192px;
 width: 256px;
}

Durch die absolute Positionierung wird das Element vom normalen Textfluss ausgenommen und kann an beliebiger Stelle platziert werden.

Das horizontal und vertikal auf Webseite zentrierte Bild

Abbildung: Das horizontal und vertikal auf der Webseite zentrierte Bild.

Wenn Sie sowohl Text und ein Bild (oder auch mehrere Bilder) zentrieren möchten, umgeben Sie den betreffenden Inhalt mit einem div-Element:

<div id="centerFrame">
  <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.</p>
  <img src="wolf.jpg" width="256" height="192" alt="Bild von einem Wolf" />
</div>

In der CSS-Regel entfernen Sie nun die Eigenschaft height und passen den negativen Wert für den oberen Außenabstand so an, dass auch die zusätzlichen Elemente auf der Seite berücksichtigt werden:

#centerFrame {
 position: absolute;
 top: 50%;
 left: 50%;
 /* negativen Wert so weit anpassen, bis Inhalt zentriert ist */
 margin-top: -150px;
 margin-left: -138px;
 width: 256px;
}

Sie sollten die Menge des zentrierten Inhalts möglichst gering halten. Diese Lösung zentriert Text und Bilder nur ungefähr, weil die Darstellung der Texthöhe sich von Rechner zu Rechner unterscheiden kann. Bei vielen Bildern und großen Mengen an HTML-Text müssen Benutzer mit geringen Bildschirmauflösungen ansonsten scrollen, um den zentrierten Inhalt zu sehen.

Siehe auch

Den Abschnitt Seitenlayouts zu Informationen über mehrspaltige Layouts, die sich ebenfalls mit der Positionierung von Elementen in einer Webseite befassen und die CSS 2.1-Spezifikation zur Eigenschaft text-align.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln