text-align

Übersicht

Die CSS Eigenschaft text-align beschreibt, wie Inlineinhalte wie Text in ihrem Elternblockelement ausgerichtet werden. text-align steuert nicht die Ausrichtung von Blockelementen selbst, nur deren Inlineinhalte.

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
Medienvisuell
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
AnimierbarNein
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

/* Schlüsselwortwerte */
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;

/* Globale Werte */
text-align: inherit;
text-align: initial;
text-align: unset;

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 der Zeilenbox ausgerichtet.
right
Die Inlineinhalte werden am rechten Rand der Zeilenbox ausgerichtet.
center
Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.
justify
Der Text wird im Block 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 Block 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.

Formale Syntax

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

Beispiele

Live-Beispiel ansehen

Livebeispiele

div { text-align: center; border:solid; }

p { background:gold; width:22em; }

noch etwas Inlineinhalt...
div { text-align: center; border:solid; }

p { background:gold; width:22em; margin: 1em auto; }

noch etwas Inlineinhalt...
div { text-align:-moz-center; text-align:-webkit-center; border:solid; }

p { background:gold; width:22em; }

noch etwas Inlineinhalt...

Hinweise

Der Standardweg, um einen Block ohne seinen Inlineinhalt zu zentieren, ist das Setzen seines linken und rechten margin auf auto, e.g.:
margin: auto; oder margin: 0 auto; oder margin-left: auto; margin-right: auto;.

Spezifikationen

Spezifikation Status Kommentar
CSS Logical Properties Level 1
Die Definition von 'text-align' in dieser Spezifikation.
Bearbeiterentwurf Keine Änderungen
CSS Text Level 3
Die Definition von 'text-align' in dieser Spezifikation.
Arbeitsentwurf 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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung (left, right, center und justify) 1.0 1.0 (1.7 oder früher) 3.0 3.5 1.0 (85)
Blockausrichtungswerte 1.0-webkit 1.0 (1.7 oder früher)-moz[1] Nicht unterstützt Nicht unterstützt 1.0 (85)-khtml
1.3 (312)-webkit [1]
start 1.0 1.0 (1.7 oder früher) Nicht unterstützt (Ja) 3.1 (525)
end 1.0 3.6 (1.9.2) Nicht unterstützt (Ja) 3.1 (525)
match-parent 16 40 (40) Nicht unterstützt Nicht unterstützt Nicht unterstützt
Merkmal Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung (left, right, center und justify) ? ? ? ? ? ?
Blockausrichtungswerte ? ? ? ? ? ?
start ? ? ? ? ? ?
end ? ? ? ? ? ?
match-parent ? ? 40.0 (40) ? ? ?

[1] WebKit und Gecko unterstützen eine Version mit Präfix von left, center und right, die nicht nur für Inlineinhalte gilt, sondern auch für Blockelemente. Dies wird dazu verwendet, das veraltete align Attribut bei manchen tabellenbezogenen Elementen zu implementieren. Diese sollten nicht auf produktiven Webseiten verwendet werden.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, fscholz, SJW, Michael2402
 Zuletzt aktualisiert von: Sebastianz,