Ausführbare HTML-Docs: Text zentrieren

Q: Wie zentriere ich Text in HTML?

Gib dem Element, das den Text enthält, text-align: center, zum Beispiel oder eine CSS-Regel wie h1 { text-align: center; }. Das zentriert jede Textzeile und allen Inline-Inhalt in diesem Element.

Q: Wie zentriere ich Text vertikal?

Mach den Container zu einer Flexbox: display: flex; align-items: center; (mit justify-content: center zentrierst du auch horizontal). Für eine einzelne Zeile in einem Kasten mit fester Höhe funktioniert auch eine line-height, die der Höhe entspricht.

Q: Ist das -Tag noch gültig?

Nein. und das Attribut align="center" sind obsolet. Browser stellen sie für alte Seiten noch dar, aber neuer Code sollte text-align: center im CSS verwenden.

Q: Wie rücke ich Text in HTML ein?

Mit CSS. text-indent: 2em rückt die erste Zeile eines Absatzes ein, und padding-inline-start: 2em oder margin-inline-start: 2em rückt den ganzen Block ein. Leerzeichen oder im Text sind keine zuverlässige Einrückung.

So zentrierst du Text in HTML

Nimm die CSS-Eigenschaft text-align: center an dem Element, das den Text enthält:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align zentriert jede Zeile im Element, auch Inline-Inhalte wie Links, Bilder und Buttons. Die Eigenschaft wird vererbt: Setzt du sie an einem Container, wird der Text in allem darin zentriert.

An den Block, nicht an das span

text-align funktioniert an Block-Containern: <p>, <div>, Überschriften, Tabellenzellen. An einem <span> oder <a> bewirkt es nichts, weil ein Inline-Element nur so breit wie sein Text ist und es keinen Platz zum Zentrieren gibt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

Die Lösung ist immer dieselbe: Verschieb text-align: center an den umgebenden Block.

Den Block zentrieren, die Zeilen linksbündig lassen

Bei einem Absatz mit mehreren Zeilen ist komplett zentrierter Text schwer zu lesen, weil jede Zeile an einer anderen Stelle beginnt. Ein übliches Muster ist, den Block auf der Seite zu zentrieren und seinen Text am Anfang auszurichten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto zentriert einen Block mit fester Breite, text-align zentriert die Zeilen darin. Wie du Kästen zentrierst (mit Flexbox, Grid oder margins), erklärt die Seite div zentrieren.

Text vertikal zentrieren

text-align wirkt nur horizontal. Um Text vertikal in einem Kasten zu zentrieren, machst du den Kasten zu einem Flex-Container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center zentriert vertikal, justify-content: center horizontal, und text-align: center zentriert die Zeilen zueinander, wenn es mehrere sind. Der Trick mit line-height funktioniert nur für eine einzelne Textzeile in einem Kasten mit bekannter Höhe.

Alle Werte von text-align

Wert	Ergebnis
`start` (Standard)	Zeilen beginnen am Anfangsrand: links im Deutschen, rechts im Arabischen und Hebräischen
`end`	Zeilen enden am Endrand
`center`	Zeilen zentriert
`justify`	Blocksatz: Zeilen reichen bis an beide Ränder (außer der letzten Zeile)
`left`, `right`	Immer links oder immer rechts, egal in welcher Sprache

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

Nimm lieber start und end statt left und right: Sie drehen sich bei Sprachen, die von rechts nach links laufen, automatisch um, wie der letzte Kasten zeigt.

Das alte center-Tag

Alte Seiten zentrieren Text mit <center> oder mit einem align-Attribut:

<center>Old way</center>
<p align="center">Also old</p>

Beides ist obsolet. Browser stellen es noch dar, damit alte Websites nicht kaputtgehen, aber im aktuellen HTML ist es ungültig und vermischt Layout mit dem Markup. Nimm text-align: center im CSS.

Text einrücken

HTML hat kein Tag zum Einrücken, und getippte Leerzeichen werden zusammengefasst (siehe Leerzeichen in HTML). Einrückungen sind CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

Einrückung	CSS
Nur die erste Zeile	`text-indent: 2em`
Der ganze Block	`padding-inline-start: 2em` oder `margin-inline-start: 2em`
Hängend (erste Zeile ragt heraus)	`padding-inline-start: 2em; text-indent: -2em`

em koppelt die Einrückung an die Schriftgröße, sie wächst also mit dem Text mit.

Häufige Fehler

text-align an einem Inline-Element. Setz es an den umgebenden Block.
Erwarten, dass text-align einen Kasten zentriert. Es zentriert Text und Inline-Inhalt, keinen Block mit fester Breite. Für Kästen nimm margin-inline: auto oder Flexbox.
<center> oder align="center" verwenden. Obsolet. Nimm CSS.
Lange Absätze zentrieren. Zentriere Überschriften und kurze Zeilen; Fließtext bleibt am Anfang ausgerichtet.
Mit   oder Leerzeichen einrücken. Nimm text-indent oder padding.

Häufig gestellte Fragen

Wie zentriere ich Text in HTML?

Gib dem Element, das den Text enthält, text-align: center, zum Beispiel <p style="text-align: center"> oder eine CSS-Regel wie h1 { text-align: center; }. Das zentriert jede Textzeile und allen Inline-Inhalt in diesem Element.

Warum funktioniert text-align: center an meinem span nicht?

Ein span ist inline und damit nur so breit wie sein Text, es gibt also keinen Platz zum Zentrieren. Setz text-align: center an den umgebenden Block (das <p> oder <div> drumherum) oder mach das span zu display: block.

Wie zentriere ich Text vertikal?

Mach den Container zu einer Flexbox: display: flex; align-items: center; (mit justify-content: center zentrierst du auch horizontal). Für eine einzelne Zeile in einem Kasten mit fester Höhe funktioniert auch eine line-height, die der Höhe entspricht.

Ist das <center>-Tag noch gültig?

Nein. <center> und das Attribut align="center" sind obsolet. Browser stellen sie für alte Seiten noch dar, aber neuer Code sollte text-align: center im CSS verwenden.

Wie rücke ich Text in HTML ein?

Mit CSS. text-indent: 2em rückt die erste Zeile eines Absatzes ein, und padding-inline-start: 2em oder margin-inline-start: 2em rückt den ganzen Block ein. Leerzeichen oder   im Text sind keine zuverlässige Einrückung.

Verwandte Konzepte