Block-Elemente horizontal zentrieren und ausrichten
Auf Websites müssen Elemente häufig horizontal ausgerichtet werden, z.B. links, rechts oder zentriert. Mit der Eigenschaft text-align ist das zwar möglich, allerdings nur bei Inline- und Inline-Block-Elementen. Bei Block-Elementen kann text-align nicht angewendet werden, bis auf einige Ausnahmen bei früheren Browsern, die text-align fehlerhaft interpretierten.
Im Grunde gibt es keine Eigenschaften in CSS, um gezielt Block-Elemente horizontal auszurichten. Daher muss man andere Mittel zur Hilfe nehmen und für die Ausrichtung verwenden. Da Block-Elemente bei Textrichtung ltr standardmäßig links ausgerichtet werden, ist die Zentrierung und die Ausrichtung auf der rechten Seite von Bedeutung.
Block-Elemente mit margin zentrieren
Wurde für ein Block-Element eine Breite zugewiesen, kann man es mit margin zentrieren. Hierfür bedient man sich den Eigenschaften margin-right und margin-left und weist ihnen den Wert auto zu.
Block-Element mit margin rechts ausrichten
Wenn man ein Block-Element rechts ausrichten möchte, braucht man lediglich den Wert von margin-right auf 0 zu ändern. Der folgende Code gilt für die Textrichtung ltr (left-to-right), da bei rtl das Element sowieso rechts angeordnet wird.
Block-Elemente bei Textrichtung rtl mit margin links ausrichten
Falls man eine Website mit der Textrichtung rtl (right-to-left) erstellt, wie das z.B. bei arabischen Websites der Fall ist, dann kann man mit dem folgenden Code das Block-Element links ausrichten.
Block-Element mit float links oder rechts ausrichten
Die Eigenschaft float ist zwar nicht dafür gedacht, um Elemente horizontal auszurichten, sondern um Elemente umfließen zu lassen. Allerdings hat man damit denselben Effekt und kann die Block-Elemente rechts oder links ausrichten. Eine Zentrierung ist damit jedoch nicht möglich. Man sollte nur darauf achten, mit clear das Umfließen zu beenden, sofern es notwendig ist.
Beispiele mit margin und float
Die folgenden HTML- und CSS-Codes gelten für die Textrichtung ltr.
.links {
width: 150px;
border: 1px solid black;
}
.zentriert {
margin-left: auto;
margin-right: auto;
width: 150px;
border: 1px solid black;
}
.rechts {
margin-left: auto;
margin-right: 0;
width: 150px;
border: 1px solid black;
}
.float-left {
float: left;
width: 150px;
border: 1px solid black;
}
.float-right {
float: right;
width: 150px;
border: 1px solid black;
}<div class="links">Element links</div>
<div class="zentriert">Element zentriert</div>
<div class="rechts">Element rechts</div>
<div class="float-left">float: left</div>
<div class="float-right">float: right</div>Die Ansicht im Browser würde bei Textrichtung ltr wie folgt sein.
Änderungen bei Textrichtung rtl
Bei einer Textrichtung rtl müsste man bei dem Beispiel die Klassen links und rechts wie folgt ändern.
.links {
width: 150px;
margin-left: 0;
margin-right: auto;
border: 1px solid black;
}
.rechts {
width: 150px;
border: 1px solid black;
}Die übrigen Einstellungen würden so bleiben und die Positionen der Block-Elemente sind mit den Änderungen bei rtl wie bei der Textrichtung ltr. Die Texte werden jedoch an den rechten Rändern des jeweiligen Block-Elements ausgerichtet, da die Textrichtung von rechts nach links ist. Die Rahmen dienen nur zur besseren Sichtbarkeit der Elemente.