text-align

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.

Steckbrief text-align

Syntax: text-align: start | end | left | right | center | justify
Initialwert: start
Vererbt: Ja
Animierbar: Nein

Kategorie: Typografie
Werte: 7
Beispiele: 5
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 15.02.2026

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

7 Werte

Wert	Beschreibung	Beispiel
`left`	Text wird am linken Rand ausgerichtet.	text-align: left
`right`	Text wird am rechten Rand ausgerichtet.	text-align: right
`center`	Text wird zentriert.	text-align: center
`justify`	Text wird als Blocksatz gesetzt. Letzte Zeile bleibt linksbuendig.	text-align: justify
`start`	Logischer Wert: Anfang der Schreibrichtung (links in LTR, rechts in RTL).	text-align: start
`end`	Logischer Wert: Ende der Schreibrichtung (rechts in LTR, links in RTL).	text-align: end
`inherit`	Erbt den Wert explizit vom Elternelement.	text-align: inherit

Beispiele

5 Beispiele

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

Grundlegende Ausrichtung

.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>

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 mit und ohne Silbentrennung

.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>

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.

Logische Werte mit start und end

/* 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>

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

Zentrierte Hero-Section

.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

5 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilitaet

5 von 5

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.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Komplett

justify kann zu ungleichmaessigen Wortabstaenden fuehren
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da