Ü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.
Initialwert | start 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 auf | Blockcontainer |
Vererbt | Ja |
Medien | visuell |
Berechneter Wert | wie 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 |
Animierbar | Nein |
Kanonische Reihenfolge | Reihenfolge 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
, fallsdirection
ltr
ist undright
, fallsdirection
rtl
ist. end
- Dasselbe wie
right
, fallsdirection
ltr
ist undleft
, fallsdirection
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 Wertestart
undend
in Bezug auf diedirection
des Elternelements berechnet werden und durch den passendenleft
oderright
Wert ersetzt werden.
Formale Syntax
start | end | left | right | center | justify | match-parent | start end
Beispiele
Livebeispiele
p { background:gold; width:22em; }
noch etwas Inlineinhalt...p { background:gold; width:22em; margin: 1em auto; }
noch etwas Inlineinhalt...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.