Die Textausrichtungseigenschaft

In CSS können Sie die Ausrichtung von Text genau wie in einem Textverarbeitungsprogramm wie MS Word steuern. Dies geschieht mit der Eigenschaft text-align, die mehrere unterschiedliche Werte hat. Mit den am häufigsten verwendeten Optionen können Sie den Text links, rechts oder in der Mitte anpassen. Hier ist ein Beispiel:

<p style="text-align: left;">Left aligned text</p>
<p style="text-align: center;">Center aligned text</p>
<p style="text-align: right;">Right aligned text</p>

Links ist die Standardeinstellung, daher können wir dies auch weglassen, aber ich habe es aus Gründen der Konsistenz in das Beispiel aufgenommen. Möglicherweise müssen Sie auch zum linksbündigen Text zurückkehren, da dieser vom übergeordneten Element geerbt wird, wie im folgenden Beispiel dargestellt:

<div style="text-align: center;">
	This div element contains centered text
	<div style="text-align: left;">
		but also left aligned text!
	</div>
</div>

Wie Sie sehen, weisen wir das zweite div-Element speziell an, die linke Ausrichtung zu verwenden. Andernfalls würde der Text in diesem Element zentriert, da er vom übergeordneten div-Element übernommen wird.

Ausrichtung Justierung

Neben der Möglichkeit, Text links, mittig oder rechts auszurichten, enthält die Eigenschaft text-align einen möglichen Wert namens justify. Wenn Sie diese Option verwenden, versucht der Browser, alle Textzeilen innerhalb des Elements auf die gleiche Länge zu bringen. In der Regel wird dabei der Abstand zwischen den einzelnen Wörtern angepasst. Dieses Layout wird häufig in Zeitungen und Zeitschriften verwendet und in der Regel zur Verbesserung der Lesbarkeit eingesetzt. Hier ist ein Beispiel für die Berechtigungsoption in Aktion:

<p style="text-align: justify; width: 200px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lectus mattis, consequat mi vitae, tristique ipsum. In hac habitasse platea dictumst. Integer sit amet aliquet dolor.
</p>

Wenn Sie dieses Beispiel testen, sollten Sie feststellen, dass alle Textzeilen im Absatz links und rechts ausgerichtet sind. Sie werden möglicherweise auch feststellen, warum dies nicht immer verwendet wird - die Menge der hinzugefügten Leerzeichen kann recht hoch sein, was zu seltsam aussehenden Linien führt.

Zusammenfassung

Mit der Eigenschaft text-align können Sie ganz einfach die Ausrichtung Ihrer Textelemente definieren. Die am häufigsten verwendeten Werte sind left, right und center, aber die Option justify kann auch nützlich sein, wenn die Linien an beiden Enden ausgerichtet werden sollen.