CSS: Blockelement in HTML5 zentrieren

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.

4 comments on “CSS: Blockelement in HTML5 zentrieren

  1. 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!

  2. 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:

    .zentriert {
      width: 100%;
      margin: 0 auto;
    }

    Das kann man sich gefallen lassen…

  3. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *