CSS Kochbuch

4.4 Elemente auf einer Webseite zentrieren

Problem

Teile der Webseite sollen zentriert dargestellt werden, wie in Abbildung 4-5 gezeigt.

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 Abbildung 4-6 können Sie die tatsächliche Breite der zentrierten Elemente besser erkennen.

Abbildung 4-5. Eine zentrierte Überschrift

Abbildung 4-6. Die graue Hintergrundfarbe ...