Das Tag <center> für die HTML-Text-Zen­trie­rung wurde mit HTML5 ab­ge­schafft. Um einen Text in HTML zu zen­trie­ren, nutzt man seitdem CSS. Da der er­for­der­li­che Parameter text-align bereits im style-Tag den Aufbau des Dokuments festlegt, entsteht ein über­sicht­li­che­rer Code und Fehler können vermieden werden.

Center HTML-Text: Wie zentriert man Texte in HTML?

Für das HTML-Centering, also das Zen­trie­ren von Texten in einem HTML-Dokument, nutzt man heute den CSS-Befehl text-align. Mithilfe dieser Anweisung wird der jeweilige Text ho­ri­zon­tal for­ma­tiert. Lange Zeit wurde zu diesem Zweck das mitt­ler­wei­le veraltete HTML-<center>-Tag verwendet. Diese Methode wird seit HTML5 nicht mehr un­ter­stützt.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

HTML Centering mit text-align in CSS

Seit HTML5 hin­ter­le­gen Sie die Anweisung, einen Text in HTML zu zen­trie­ren, im style-Tag. Diesen Vorgang können wir am ein­fachs­ten an einem kleinen Beispiel ver­an­schau­li­chen. Im folgenden Code setzen wir die Headline, den Text und einen HTML-div-Container in unserem HTML-Dokument mittig:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>Hier steht Ihre Überschrift</h1>
<p>Hier ist Platz für Ihren Inhalt.</p>
<div>An dieser Stelle befindet sich ein div.</div>
</body>
</html>
html

Der Aufbau des Dokuments wird somit bereits im Vorfeld fest­ge­legt. Dies sorgt dafür, dass der Code über­sicht­lich bleibt und Fehler vermieden werden.

Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung

Das veraltete HTML-<center>-Tag

In älteren Versionen der Web­pro­gram­mier­spra­che kam das HTML-Tag <center> zum Einsatz, das wir Ihnen der Voll­stän­dig­keit halber ebenfalls zeigen wollen. Da es veraltet ist und nicht länger un­ter­stützt wird, sollten Sie al­ler­dings unbedingt auf die CSS-Lösung zu­rück­grei­fen. Die Syntax von <center> für HTML-Text ge­stal­te­te sich wie folgt:

<center><p>Text</p></center>
html

Im nach­fol­gen­den Beispiel können Sie sehen, wie das HTML-<center>-Tag in der Praxis genau ein­ge­setzt wurde. Anders als bei der modernen Lösung musste man den Code direkt im Body ändern, um Text in HTML mittig zu setzen. Je nach Umfang und Aufbau führte dies zu einem un­über­sicht­li­chen Code und war im Vergleich deutlich feh­ler­an­fäl­li­ger:

<!DOCTYPE html>
<html>
<body>
<p>Hier steht ein Text, der nicht zentriert wurde.</p>
<center><p>Hier steht ein Text, der zentriert wurde.</p></center>
</body>
</html>
html

Das Ergebnis sieht in etwa wie folgt aus:

Bild: HTML Centering Beispiel
Im Beispiel sieht man, dass der Text innerhalb des center-Tags mittig platziert wird.
Tipp

Alles Wichtige zur Hypertext Markup Language finden Sie in unserem Digital Guide. Hier erklären wir Ihnen zum Beispiel, wie Sie Ihre ersten Schritte mit HTML machen. Auch wenn Sie sich fragen, wie Sie CSS in HTML einbinden, liefern wir das passende Tutorial mit vielen prak­ti­schen Bei­spie­len.

Zum Hauptmenü