HTML <center> Tag
Das <center>-Tag zentriert Inhalte. Das CSS-Äquivalent ist die Eigenschaft text-align. Mit Beispielen erklärt.
Das HTML-Tag <center> ist veraltet und darf in neuen Seiten nicht mehr verwendet werden. Es war ein Block-Level-Element, das alles darin horizontal zentrierte, wurde jedoch aus dem HTML-Standard entfernt und wird in HTML5 nicht mehr unterstützt. Moderne Browser können es aus Gründen der Rückwärtskompatibilität noch rendern, sein Verhalten ist jedoch nicht garantiert und es besteht keine Validierung.
Diese Seite erklärt, was <center> früher tat, und zeigt vor allem die CSS-Techniken, die es ersetzen: text-align: center für Inline-Inhalte, margin: 0 auto für Block-Elemente und Flexbox zum Zentrieren sowohl horizontal als auch vertikal.
Das Tag <center> ist ein veraltetes HTML-Tag und wird in HTML5 nicht unterstützt. Darstellung gehört in CSS, nicht ins HTML-Markup. Verwenden Sie stattdessen die unten aufgeführten CSS-Techniken.
Der konzeptionelle Unterschied: Inline- vs. Block-Zentrierung
Entscheiden Sie vor der Wahl einer Technik, was Sie zentrieren möchten. Dies ist mit Abstand die häufigste Quelle der Verwirrung.
- Inline-Inhalte zentrieren (Text, Bilder, Inline-Elemente) innerhalb eines Containers: Verwenden Sie
text-align: centeram Container. Der Container behält seine volle Breite; nur sein Inhalt verschiebt sich zur Mitte. - Ein Block-Element zentrieren (ein
<div>,<section>, eine Karte) innerhalb seines Elternelements: Verwenden Siemargin: 0 autoam Block selbst. Der Block muss schmaler als sein Elternelement sein, sonst füllt er bereits die Zeile aus und es gibt nichts zu zentrieren.
Kurz gesagt: text-align zentriert Inhalte innerhalb einer Box; margin: auto zentriert die Box selbst.
Inline-Inhalte mit text-align zentrieren
Wenden Sie text-align: center auf das Elternelement an. Die Abmessungen des Elements ändern sich nicht — nur der Inhalt darin wird zentriert.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This text is aligned to the left.</p>
<p style="text-align:center">And this one is placed in the center.</p>
</body>
</html>Dies ist der direkte Ersatz für <center>, wenn Sie lediglich zentrierten Text benötigen.
Ein Block-Element mit margin: 0 auto zentrieren
Um ein Block-Level-Element horizontal innerhalb seines Elternelements zu zentrieren, geben Sie ihm eine width und setzen die linken und rechten Abstände auf auto. Der Browser verteilt dann den verbleibenden horizontalen Platz gleichmäßig auf beide Seiten.
margin: 0 auto ist eine Kurzschreibweise für „0 oben/unten, auto links/rechts." Im Hintergrund werden margin-left und margin-right jeweils auf auto gesetzt.
Die width ist erforderlich. Ein Block-Element ohne festgelegte Breite füllt standardmäßig 100 % seines Elternelements aus, sodass kein freier Platz für die auto-Abstände übrig bleibt — es scheint sich also nichts zu bewegen. Sobald das Element schmaler als sein Elternelement ist, zentrieren die auto-Abstände es.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="margin:0 auto; width:50%; background:#eee;">
This block is centered horizontally.
</div>
</body>
</html>Beachten Sie, dass margin: auto nur horizontal zentriert — ein Block wird dadurch nicht vertikal zentriert.
In beide Richtungen mit Flexbox zentrieren
Wenn Sie Inhalte gleichzeitig horizontal und vertikal zentrieren müssen, ist Flexbox die moderne und zuverlässige Wahl. Machen Sie den Container zu einem Flex-Container, verwenden Sie dann justify-content: center für die horizontale Achse und align-items: center für die vertikale Achse.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; justify-content:center; align-items:center;
height:200px; border:1px solid #ccc;">
<p>This box is centered both horizontally and vertically.</p>
</div>
</body>
</html>Hier macht display:flex das <div> zu einem Flex-Container, justify-content:center zentriert seine Kinder entlang der Haupt- (horizontalen) Achse und align-items:center zentriert sie entlang der Quer- (vertikalen) Achse. Die height ist festgelegt, damit vertikaler Raum zum Zentrieren vorhanden ist.
Eine vollständige Erklärung dieser Eigenschaften und des übrigen Layout-Modells finden Sie unter The Ultimate Guide to Flexbox.
Wie das alte <center>-Tag aussah
Nur zur Referenz — verwenden Sie dies nicht in neuem Code. Das <center>-Tag kam paarweise vor und zentrierte alles zwischen dem öffnenden und schließenden Tag:
<p>This text is aligned to the left.</p>
<center>And this one is placed in the center.</center>Das moderne Äquivalent ist schlicht <p style="text-align:center">…</p>, wie oben gezeigt.