text-align

Syntax

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

Die Eigenschaft text-align wird auf eine der folgenden Arten angegeben:

• Mit den Schlüsselwortwerten start, end, left, right, center, justify, justify-all, or match-parent.
• Nur mit einem <string> Wert, wobei in diesem Fall der andere Wert standardmäßig auf right gesetzt wird.
•  Die Verwendung sowohl eines Schlüsselwortwerts als auch eines <string> Wertes.

Werte

start

Dasselbe wie left, falls direction ltr ist und right, falls direction rtl ist.

end

Dasselbe wie right, falls direction ltr ist und left, falls direction rtl ist.

left

Die Inlineinhalte werden am linken Rand (linksbündig) der Zeilenbox ausgerichtet.

right

Die Inlineinhalte werden am rechten Rand (rechtsbündig) der Zeilenbox ausgerichtet.

center

Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.

justify

Der Text wird im Blocksatz angeordnet. Text sollte seinen linken und rechten Rand bündig am linken und rechten Rand des Absatzinhalts ausrichten.

justify-all

Dasselbe wie justify, erzwingt jedoch, dass die letzte Zeile ebenfalls im Blocksatz angeordnet wird.

match-parent

Ähnlich zu inherit mit dem Unterschied, dass die Werte start und end in Bezug auf die direction des Elternelements berechnet werden und durch den passenden left oder right Wert ersetzt werden.

<string>

Gibt bei Anwendung auf eine Tabellenzelle das Zeichen an, um das der Inhalt der Zelle ausgerichtet wird.

Bedenken zur Zugänglichkeit

Der inkonsistente Abstand zwischen den Wörtern, der durch einen gerechtfertigten Text entsteht, kann für Menschen mit kognitiven Problemen wie Legasthenie problematisch sein.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0

Formale Definition

Formale Syntax

start | end | left | right | center | justify | match-parent

Beispiele

Linksbündig

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: left;
  border: solid;
}

Ergebnis

Zentriert

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: center;
  border: solid;
}

Ergebnis

Blocksatz

HTML

<p class="example">
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

.example {
  text-align: justify;
  border: solid;
}

ergebnis

Hinweis

Der Standard-kompatible Weg, einen Block selbst zu zentrieren, ohne seinen Inline-Inhalt zu zentrieren, ist z.B. das Setzen der linken und rechten margin auf auto, z.B..:

.something {
  margin: auto;
}

.something {
  margin: 0 auto;
}

.something {
  margin-left: auto;
  margin-right: auto;
}

Spezifikationen

Browser Kompatibilität

Siehe auch

• margin:auto, margin-left:auto, vertical-align