text-align

Die CSS Eigenschaft text-align egt die horizontale Ausrichtung eines Blockelements oder eines Tabellenzellenrahmens fest. Dies bedeutet, dass sie wie vertical-align funktioniert, jedoch in horizontaler Richtung.

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:

Werte

start This is an experimental API that should not be used in production code.
Dasselbe wie left, falls direction ltr ist und right, falls direction rtl ist.
end This is an experimental API that should not be used in production code.
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 This is an experimental API that should not be used in production code.
Dasselbe wie justify, erzwingt jedoch, dass die letzte Zeile ebenfalls im Blocksatz angeordnet wird.
match-parent This is an experimental API that should not be used in production code.
Ä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> This is an experimental API that should not be used in production code.
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.

Formale Definition

Initialwertstart oder ein namenloser Wert, der sich wie left verhĂ€lt, falls direction den Wert ltr hat, right, falls direction den Wert rtl hat, falls start nicht vom Browser unterstĂŒtzt wird.
Anwendbar aufBlockcontainer
VererbtJa
Berechneter Wertwie angegeben, außer fĂŒr den match-parent Wert, welcher in Bezug auf den direction Wert des Elternelements berechnet wird und einen berechneten Wert von left oder right ergibt
Animationstypdiskret

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

Spezifikation Status Kommentar
CSS Logical Properties and Values Level 1
Die Definition von 'text-align' in dieser Spezifikation.
Bearbeiterentwurf Keine Änderungen
CSS Text Module Level 4
Die Definition von 'text-align' in dieser Spezifikation.
Bearbeiterentwurf FĂŒgt den Wert <string> hinzu.
CSS Text Module Level 3
Die Definition von 'text-align' in dieser Spezifikation.
AnwĂ€rter Empfehlung FĂŒgt die start, end und match-parent Werte hinzu. Ändert den unbenannten Initialwert zu start (der er war).
CSS Level 2 (Revision 1)
Die Definition von 'text-align' in dieser Spezifikation.
Empfehlung Keine Änderungen
CSS Level 1
Die Definition von 'text-align' in dieser Spezifikation.
Empfehlung UrsprĂŒngliche Definition

Browser KompatibilitÀt

BCD tables only load in the browser

Siehe auch