Zum Zentrieren eines Blockelementes (<div>
) konnte man in HTML4 noch das Attribut align
verwenden:
<div align="center"> <div> ...
Damit wird der zweite div
-Block bei Angabe einer festen Breite innerhalb des ersten Blocks zentriert.
Mit HTML5 ist allerdings das align
-Attribut für div
-Elemente nicht mehr zulässig, d.h. das Zentrieren muss in HTML5 über CSS realisiert werden.
Warum dann nicht text-align
verwenden?
Die CSS-Eigenschaft text-align
hilft hierbei nur begrenzt weiter. Diese wirkt sich nur auf den enthaltenen Text aus, Blockelemente werden nicht zentriert.
Lösung
CSS bietet dennoch eine Möglichkeit zum Zentrieren von Blockelementen:
.zentriert { width: 900px; margin: 0 auto; }
<div> <div class="zentriert"> ...
Durch Angabe einer festen Breite in Verbindung mit margin:auto
wird das innere Element zentriert bzw. die Margins der linken und rechten Seite automatisch gleich gesetzt.
gerade in Zeiten mit den unterschiedlichsten Endgeräten muss wieder mit starren Breiten hantiert werden, nur um ein Element zentrieren zu können? Das ist in meinen Aufen ein klarer Rückschritt und kein Fortschritt!
Nachtrag:
Die Empörung in meiner letztem Nachricht bezog sich auf die feste Breite in “px”. Es ist jedoch auch möglich, die Breit in Prozent anzugeben:
Das kann man sich gefallen lassen…
Kommt immer darauf an, was man machen möchte. Bei unterschiedlichen Window-Breiten können auch Media Queries weiterhelfen, um feste Breiten vorzugeben.
Bei einer Breite von 100% ist das Blockelement zwangsweise zentriert. Dann kann man die
margin
-Angaben auch weglassen.