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.
Die Quelle fĂŒr dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.
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
- 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 (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 Wertestart
undend
in Bezug auf diedirection
des Elternelements berechnet werden und durch den passendenleft
oderright
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.
Formale Definition
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 |
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 |
Animationstyp | diskret |
Formale Syntax
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