CSS text-align-Eigenschaft

Definition und Verwendung

Die text-align-Eigenschaft legt die horizontale Ausrichtung des Textes in einem Element fest.

Diese Eigenschaft legt durch die Angabe, mit welchem Punkt der Zeilenumbruch ausgerichtet wird, die horizontale Ausrichtung des Textes in Blockelementen fest. Durch die Möglichkeit, dem Benutzeragenten zu erlauben, den Abstand zwischen Buchstaben und Worten im Zeilenumbruch anzupassen, wird der Wert justify unterstützt; verschiedene Benutzeragenten können unterschiedliche Ergebnisse erzielen.

Siehe auch:

CSS-Tutorial:CSS Text

HTML DOM Referenzhandbuch:textAlign-Eigenschaft

Beispiel

Legen Sie die Textausrichtung der h1, h2, h3-Elemente fest:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Versuchen Sie es selbst

CSS-Syntax

text-align: left|right|center|justify|initial|inherit;

Eigenschaftswert

Wert Beschreibung
left Text ausrichten auf die linke Seite. Standardwert: vom Browser bestimmt.
right Den Text nach rechts ausrichten
center Den Text in die Mitte ausrichten
justify Das Ausrichten des Textes in die Mitte
inherit Die text-align-Eigenschaft des übergeordneten Elements übernehmen.

Wert justify

Der letzte horizontale Ausrichtungsattribut ist justify, der einige eigene Probleme mit sich bringt.

Wert justify kann das Ausrichten beider Enden des Textes ermöglichen. In Blocksatztexten werden die linken und rechten Enden der Textzeilen auf die inneren Grenzen des übergeordneten Elements gelegt. Anschließend wird der Abstand zwischen den Wörtern und den Buchstaben angepasst, um die Länge jeder Zeile exakt zu machen. Sie haben vielleicht bereits bemerkt, dass Blocksatztext im Druckbereich häufig vorkommt. Allerdings müssen in CSS zusätzliche Überlegungen angestellt werden.

Bestimmt, wie der Benutzeragent (nicht CSS) die Streckung des Blocksatztextes festlegt, um den Raum zwischen den linken und rechten Grenzen des übergeordneten Elements auszufüllen. Zum Beispiel könnten einige Browser zusätzlichen Raum zwischen den Wörtern hinzufügen, während andere Browser den zusätzlichen Raum zwischen den Buchstaben gleichmäßig verteilen (aber die CSS-Norm betont besonders, dass letter-spacing-EigenschaftAls Längenwert angegeben, "Der Benutzeragent kann den Abstand zwischen den Zeichen nicht weiter erhöhen oder verringern" (Anmerkung 1). Einige Benutzeragenten könnten den Raum bestimmter Zeilen verringern, um den Text enger zu machen. Alle diese Verfahren können das Aussehen des Elements beeinflussen und sogar seine Höhe ändern, abhängig davon, wie stark die Ausrichtungswahl des Benutzeragents die Anzahl der Textzeilen beeinflusst.

CSS spezifiziert auch nicht, wie Bindestriche behandelt werden sollen (Anmerkung 1). Die meisten Blocksatztexte verwenden Bindestriche, um lange Wörter auf zwei Zeilen zu verteilen, um den Abstand zwischen den Wörtern zu verringern und das Aussehen der Textzeilen zu verbessern. Da CSS jedoch das Verhalten von Bindestrichen nicht definiert, ist es unwahrscheinlich, dass Benutzeragenten automatisch Bindestriche hinzufügen. Daher erscheint Blocksatztext in CSS nicht so gut gedruckt, insbesondere wenn der Elementbreite zu schmal ist,以至于每行 nur wenige Wörter passen. Natürlich ist es möglich, schmale Designelemente zu verwenden, aber man muss sich der entsprechenden Nachteile bewusst sein.

Anmerkung 1:In CSS wird nicht erläutert, wie Bindestriche behandelt werden sollen, da verschiedene Sprachen unterschiedliche Bindestrichregeln haben. Die Norm versucht nicht, solche möglicherweise unvollständigen Regeln zu harmonisieren, sondern erwähnt dieses Problem einfach nicht.

Technische Details

Standardwert: Wenn das direction-Attribut ltr ist, ist der Standardwert left; wenn direction rtl ist, dann right.
Vererbbarkeit: ja
Version: CSS1
JavaScript-Syntax: object.style.textAlign="right"

Mehr Beispiele

Text ausrichten
Dieses Beispiel zeigt, wie Text ausgerichtet werden kann.

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5