HTML Centering: Text zentrieren mit CSS

Das Tag <center> für die HTML-Text-Zentrierung wurde mit HTML5 abgeschafft. Um einen Text in HTML zu zentrieren, nutzt man seitdem CSS. Da der erforderliche Parameter text-align bereits im style-Tag den Aufbau des Dokuments festlegt, entsteht ein übersichtlicherer Code und Fehler können vermieden werden.

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

Für das HTML-Centering, also das Zentrieren von Texten in einem HTML-Dokument, nutzt man heute den CSS-Befehl text-align. Mithilfe dieser Anweisung wird der jeweilige Text horizontal formatiert. Lange Zeit wurde zu diesem Zweck das mittlerweile veraltete HTML-<center>-Tag verwendet. Diese Methode wird seit HTML5 nicht mehr unterstützt.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

HTML Centering mit text-align in CSS

Seit HTML5 hinterlegen Sie die Anweisung, einen Text in HTML zu zentrieren, im style-Tag. Diesen Vorgang können wir am einfachsten an einem kleinen Beispiel veranschaulichen. 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 festgelegt. Dies sorgt dafür, dass der Code übersichtlich bleibt und Fehler vermieden werden.

Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach

Das veraltete HTML-<center>-Tag

In älteren Versionen der Webprogrammiersprache kam das HTML-Tag <center> zum Einsatz, das wir Ihnen der Vollständigkeit halber ebenfalls zeigen wollen. Da es veraltet ist und nicht länger unterstützt wird, sollten Sie allerdings unbedingt auf die CSS-Lösung zurückgreifen. Die Syntax von <center> für HTML-Text gestaltete sich wie folgt:

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

Im nachfolgenden Beispiel können Sie sehen, wie das HTML-<center>-Tag in der Praxis genau eingesetzt 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übersichtlichen Code und war im Vergleich deutlich fehleranfälliger:

<!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:

html-centering-beispiel.png
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 praktischen Beispielen.

War dieser Artikel hilfreich?