Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: text-align, Kategorien: Textdarstellung (allgemein), Text (CSS 2.1), Text (CSS 3)

Textausrichtung

Definiert die Textausrichtung in Block-Elementen.

CSS-Eigenschaft: text-align
KurzbeschreibungWerteStandardwertKategorieHinweis
Textausrichtung
  • <string>(CSS 3)
  • left
  • right
  • center
  • justify
  • start(CSS 3)
  • end(CSS 3)
  • match-parent(CSS 3)
  • inherit
left
falls "direction: ltr"
right
falls "direction: rtl"
start
(in CSS3)
Allgemein:
Textdarstellung
CSS 2.1:
Text
CSS 3:
Text
 

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.
Browserunterstützung von text-align
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu text-align:



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:

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 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:

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!
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.085 sec.

Browser-Marktanteile