CSS: Blockelement in HTML5 zentrieren

Mathias Lipowski

–

March 29, 2011

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.

CSS

Comments

4 responses to “CSS: Blockelement in HTML5 zentrieren”

Web-Development: eine Sammlung an hilfreichen Tutorials und Webseiten – blog.mixable.de

November 18, 2011

[…] Blockelement in HTML5 zentrieren […]

Reply
BigBen

March 11, 2015

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!

Reply
BigBen

March 11, 2015
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…
Reply
mathias

March 11, 2015

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.

Reply

CSS: Blockelement in HTML5 zentrieren

Warum dann nicht text-align verwenden?

Lösung

Comments

4 responses to “CSS: Blockelement in HTML5 zentrieren”

Leave a Reply Cancel reply

Warum dann nicht `text-align` verwenden?