CSS-Eigenschaft: text-align, Kategorien: Textdarstellung (allgemein), Text (CSS 2.1), Text (CSS 3)
Textausrichtung
Definiert die Textausrichtung in Block-Elementen.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Textausrichtung |
| left falls "direction: ltr" right falls "direction: rtl" start (in CSS3) |
|
Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (CSS 2.1), Text (CSS 3):
- hanging-punctuation
- hyphens
- letter-spacing
- line-break
- line-height
- line-stacking
- line-stacking-ruby
- line-stacking-shift
- line-stacking-strategy
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- overflow-style
- overflow-wrap
- tab-size
- Aktuelle Seite: text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-height
- text-indent
- text-justify
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- white-space
- word-break
- word-spacing
- word-wrap
Folgendes ist beim Einsatz von text-align zu beachten:
- Wirkt nur bei Block-Elementen. Wenn Block-Elemente als Inline-Elemente deklariert werden, kann text-align nicht wirken.
- left richtet Text links aus, right rechts, center zentriert einen Text und justify setzt den Text als Blocksatz.
- Der W3C-Stasndard (http://www.w3.org/TR/CSS21/text.html#propdef-text-align) spricht als Initial-Wert von a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'. Das bedeutet, dass der Standardwert von der Eigenschaft direction abhängig ist. Da diese in der westlichen Welt normalerweise ltr (left to right) ist und auch selten verändert wird, ist als Standardwert left zu merken.
- Aus Sicht einer guten Lesbarkeit sollte der Standardwert left bei Fließtexten belassen werden, da dieses die beste Lesbarkeit bereitet. Dies gilt zumindest für die westliche Hemisphäre, in der die normale Schreibrichtung von links nach rechts ist.
- In CSS 3 sind weitere Werte hinzugekommen, auch der Default-Wert ändert sich auf start. Detaillierte Beschreibung folgt.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu text-align:
- W3C Spezifikation:
http://www.w3.org/TR/css3-text/#text-align
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
target-position - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
text-align-last
Beispiele
HTML:
<div>
<p>Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!</p>
</div>CSS:
div {
font-size: 125%;
border: 1px solid black;
padding: 15px;
}
div * {
margin: 0px;
}
/* An dieser Stelle ist das Default-Verhalten "left" zu sehen */Beispiel Nr. 1 So sieht's aus:
Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!
HTML:
<div>
<p class="doRight">Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!</p>
</div>CSS:
p.doRight {
text-align: right;
}Beispiel Nr. 2 So sieht's aus:
Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!
HTML:
<div>
<p class="doCenter">Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!</p>
</div>CSS:
p.doCenter {
text-align: center;
}Beispiel Nr. 3 So sieht's aus:
Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!
HTML:
<div>
<p class="doJustify">Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!</p>
</div>CSS:
p.doJustify {
text-align: justify;
}Beispiel Nr. 4 So sieht's aus:
Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!
HTML:
<div>
<span class="doRight">Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!</span>
</div>CSS:
span.doRight {
text-align: right;
color: red;
}
/* Hier wird die Textausrichtung auf ein Inline-Element angewendet - und greift nicht. */Beispiel Nr. 5 So sieht's aus:
HTML:
<div>
<span class="doRight doBlock">Einzelhandeslkaufmänner und Donausdampfschiffe sind natürlich und extrem-selten-zu-finden Wörter, deren Länge in Sinnhaftigkeitundverständlichkeit schwer zu finden sind. Beispiele mit Endloswortanwortsatzgeschichsten sind aber einfach gut für bestimmte Beispiele!</span>
</div>CSS:
span.doBlock {
display: block;
}
/* Erst wenn ein Inline-Element als Block-Element definiert ist, kann text-align greifen. */Beispiel Nr. 6 So sieht's aus:
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!