text-align

Zuletzt aktualisiert am 15. Februar 2026

text-align bestimmt, wie Inline-Inhalte innerhalb eines Block-Elements horizontal ausgerichtet werden. Die Eigenschaft wirkt auf Text, Inline-Elemente und Inline-Blocks. Der Standardwert start entspricht in westlichen Sprachen left. Neben den klassischen Werten left, right, center und justify gibt es die logischen Werte start und end, die sich automatisch an die Schreibrichtung anpassen und damit internationalisierungsfreundlich sind.

Grundlagen

text-align richtet den Inline-Inhalt eines Block-Elements aus. Das betrifft Text, <img>-Elemente, <span>-Elemente und alles mit display: inline oder display: inline-block. Block-Elemente selbst werden nicht von text-align beeinflusst. Um ein <div> zu zentrieren, brauchst du margin: 0 auto, nicht text-align: center.

Die Eigenschaft wird vererbt. Setzt du text-align: center auf einen Container, gilt das fuer alle Text-Elemente darin, bis ein Kindelement einen eigenen Wert setzt. Das ist praktisch fuer Bereiche wie Hero-Sections oder Footer, wo du alles auf einmal zentrieren willst.

justify verteilt den Text gleichmaessig ueber die gesamte Zeilenbreite. Das sieht bei breiten Textbloecken ordentlich aus, kann aber bei schmalen Spalten grosse Luecken zwischen Woertern erzeugen. In Kombination mit hyphens: auto lassen sich diese Luecken durch Silbentrennung reduzieren.

Syntax & Werte

Beispiele

Grundlegende Ausrichtung

Die vier klassischen Ausrichtungen im direkten Vergleich. left ist der Standard in westlichen Sprachen, center wird haeufig fuer Ueberschriften und Hero-Bereiche verwendet.

.left    { text-align: left; }
.center  { text-align: center; }
.right   { text-align: right; }
.justify { text-align: justify; }

<div class="align-demo">
<div class="a-left"><div class="label">text-align: left</div>Dieser Text ist linksbuendig ausgerichtet. Das ist der Standard fuer westliche Sprachen und die gaengigste Ausrichtung fuer Fliesstexte.</div>
<div class="a-center"><div class="label">text-align: center</div>Dieser Text ist zentriert. Ideal fuer Ueberschriften, Hero-Bereiche und kurze Textbloecke.</div>
<div class="a-right"><div class="label">text-align: right</div>Dieser Text ist rechtsbuendig. Wird haeufig fuer Zahlen in Tabellen oder Datumsangaben verwendet.</div>
<div class="a-justify"><div class="label">text-align: justify</div>Dieser Text ist im Blocksatz gesetzt. Der Text wird gleichmaessig ueber die gesamte Breite verteilt, was bei laengeren Absaetzen ein sauberes Erscheinungsbild ergibt.</div>
</div>

Blocksatz mit Silbentrennung

justify allein kann bei schmalen Spalten grosse Luecken zwischen Woertern erzeugen. Mit hyphens: auto und der Sprachangabe lang="de" aktivierst du die automatische Silbentrennung, die diese Luecken deutlich reduziert.

.blocksatz {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto; /* Safari */
}

<div class="hyphens-demo">
<div class="h-without" lang="de"><div class="label">Ohne Silbentrennung</div>Programmiersprachen wie JavaScript und TypeScript bieten unterschiedliche Moeglichkeiten fuer Webentwicklung.</div>
<div class="h-with" lang="de"><div class="label">Mit hyphens: auto</div>Programmiersprachen wie JavaScript und TypeScript bieten unterschiedliche Moeglichkeiten fuer Webentwicklung.</div>
</div>

Logische Werte: start und end

start und end passen sich automatisch an die Schreibrichtung an. In Links-nach-Rechts-Sprachen (LTR) entspricht start dem Wert left. In Rechts-nach-Links-Sprachen (RTL) wie Arabisch oder Hebraeisch wird start zu right. Das macht dein CSS internationalisierungsfreundlich.

/* Internationalisierungsfreundlich */
.text { text-align: start; } /* LTR → left, RTL → right */
.nav  { text-align: end; }   /* LTR → right, RTL → left */

/* Statt fest verdrahtet */
.text { text-align: left; }  /* Immer links, auch in RTL */

<div class="logical-demo">
<div class="l-ltr"><div class="label">text-align: start (LTR)</div>In westlichen Sprachen ist start identisch mit left.</div>
<div class="l-rtl"><div class="label">text-align: start (RTL)</div>In RTL-Sprachen wird start zu right.</div>
</div>

Zentrierte Hero-Section

Ein typisches Anwendungsbeispiel: Eine Hero-Section mit zentriertem Text, einer Ueberschrift und einem Call-to-Action-Button.

.hero {
  text-align: center;
  padding: 3rem 1.5rem;
}

.hero p {
  max-width: 600px;
  margin-inline: auto; /* Absatz zentrieren */
}

<div class="hero-demo">
<h3>Willkommen auf der Seite</h3>
<p>Hier steht eine kurze Beschreibung. text-align: center auf dem Container zentriert alle Inline-Inhalte.</p>
<a href="#" class="btn">Jetzt starten</a>
</div>

Barrierefreiheit

Blocksatz (text-align: justify) kann fuer Menschen mit Legasthenie oder kognitiven Einschraenkungen problematisch sein. Die ungleichmaessigen Wortabstaende erschweren das Lesen, weil das Auge keinen gleichmaessigen Rhythmus findet. Die WCAG-Richtlinie 1.4.8 empfiehlt, Nutzern die Moeglichkeit zu geben, Blocksatz abzuschalten. Fuer die meisten Websites ist text-align: left die barrierefreieste Wahl.

Vermeide zentrierten Text fuer laengere Absaetze. Bei mehr als drei bis vier Zeilen wird zentrierter Text schwer lesbar, weil der Leser am Anfang jeder Zeile eine andere Position finden muss. Verwende text-align: center nur fuer Ueberschriften, kurze Textbloecke oder Call-to-Action-Bereiche.

Nutze die logischen Werte start und end statt left und right, wenn deine Website mehrere Schreibrichtungen unterstuetzen soll. Das stellt sicher, dass die Textausrichtung in RTL-Sprachen automatisch korrekt ist, ohne dass du zusaetzliches CSS schreiben musst.

Haeufige Fehler

• Block-Elemente mit text-align zentrieren wollen: text-align: center zentriert nur Inline-Inhalte, keine Block-Elemente. Ein <div> mit fester Breite zentrierst du mit margin: 0 auto oder margin-inline: auto.
• Langen Fliesstext zentrieren: Zentrierter Text ist nur fuer kurze Passagen geeignet. Bei laengeren Absaetzen leidet die Lesbarkeit, weil der Zeilenbeginn staendig wechselt.
• Blocksatz ohne Silbentrennung: text-align: justify ohne hyphens: auto erzeugt bei schmalen Spalten grosse Wortluecken. Aktiviere immer die Silbentrennung, wenn du Blocksatz verwendest.
• text-align auf Inline-Elemente setzen: text-align wirkt nur auf Block-Container. Auf einem <span> hat die Eigenschaft keinen Effekt, weil Inline-Elemente keine eigene Zeilenbreite haben.
• left statt start verwenden: In internationalen Projekten ist text-align: start die bessere Wahl, weil es sich automatisch an die Schreibrichtung anpasst. left ist in RTL-Kontexten falsch.

Browser-Kompatibilitaet

text-align wird von allen Browsern vollstaendig unterstuetzt. Die logischen Werte start und end werden seit 2015/2016 von allen modernen Browsern unterstuetzt.

Email-Kompatibilitaet

text-align funktioniert in HTML-Emails zuverlaessig. Verwende left, center und right fuer maximale Kompatibilitaet. Die logischen Werte start und end werden in Emails nicht unterstuetzt.

Verwandte Eigenschaften