Inhalte horizontal ausrichten mit text-align
Aus Textverarbeitungsprogrammen wie z.B. Word ist bekannt, dass man die Texte links, rechts, zentriert oder als Blocksatz ausrichten kann. Bei Websites ist das ebenfalls möglich. Hierfür verwendet man in CSS die Eigenschaft text-align. Damit ist es möglich, Inline- und Inline-Block-Elemente horizontal auszurichten.
Die Eigenschaft text-align wird nicht den auszurichtenden Elementen an sich zugewiesen, sondern den Elternelementen. So definiert man durch die Zuweisung auf Elemente vom Typ block, table-cell und inline-block, wie die Inhalte der Elemente ausgerichtet werden sollen. Nachfolgend ist die Syntax anhand eines Beispiels abgebildet.
Werte für text-align
Die folgenden Werte können für die Eigenschaft text-align angegeben werden.
- left (Links, Standardwert bei Textrichtung von links nach rechts)
- center (Zentriert)
- right (Rechts, Standardwert bei Textrichtung von rechts nach links)
- justify (Blocksatz)
- initial (Setzt auf den Standardwert)
- inherit (Vererbt vom Elternelement)
Ab CSS3
- start (Wie links bei Textrichtung ltr, wie rechts bei Textrichtung rtl)
- end (Wie rechts bei Textrichtung ltr, wie links bei Textrichtung rtl)
- start end (1. Zeile wie start, Rest wie end, kaum Unterstützung durch Browser)
Beispiele mit text-align
Nachfolgend sind ein paar Beispiele in CSS und HTML. Die Rahmen dienen nur für eine bessere Sichtbarkeit der Elemente.
p.left {
border: 1px solid black;
text-align: left;
}
p.center {
border: 1px solid black;
text-align: center;
}
p.right {
border: 1px solid black;
text-align: right;
}
p.justify {
width:150px;
border: 1px solid black;
text-align: justify;
}
p.start {
border: 1px solid black;
text-align: start;
}
p.end {
border: 1px solid black;
text-align: end;
}<p class="left">Inhalt mit text-align: left</p>
<p class="center">Inhalt mit text-align: center</p>
<p class="right">Inhalt mit text-align: right</p>
<p class="justify">Inhalt mit Blocksatz, dem die Eigenschaft
text-align: justify; zugewiesen wurde</p>
<p class="start">Inhalt mit text-align: start</p>
<p class="end">Inhalt mit text-align: end</p>
Die Eigenschaft text-align dient für die Ausrichtung von Inline- und Inline-Block-Elementen. Wenn man Block-Elemente horizontal ausrichten möchte, kann man das z.B. mit der Eigenschaft margin oder bedingt auch mit float erreichen. Im Internet Explorer 6 und 7 wurden zwar auch Block-Elemente über text-align ausgerichtet. Allerdings entspricht das nicht den CSS-Spezifikationen und das Verhalten wurde in den Folgeversionen behoben.