Tutorial: Inhalte zentrieren

[Matthias Scharwies]

Servus! @Gunnar Bittersmann @Der Martin @all

margin: auto zentriert Blockelemente. Also den button zu einem solchen gemacht:

button {
  display: block;
  margin: auto
}

Schön wär’s gewesen, man hätte hier einfach aufs Wiki verweisen können. Aber irgendwer hat den Artikel verunstaltet. ☹️

Ja, ich habe die Verbergen-Vorlage, die den Zugriff auf die Unterkapitel verhindert hatte, entfernt. Das kam aus einer Zeit als SELFHTML nur die beste Lösung präsentieren wollte und den Rest „depublizieren“ wollte. Das hatten wir bei input type="image" auch.

Ich wollte eigentlich margin: 0 auto; durch die logische Eigenschaftenmargin-inline: auto; ergänzen, möchte den Artikel aber nun neu aufbauen.

Chris Coyier zeigt oft, wie er versucht zu einer Lösung zu kommen und dokumentiert dabei auch seine Zwischenschritte. Problem ist ja, dass man sowohl für margin: auto als auch text-align:center immer zusätzliche CSS-Eigenschaften benötigt. Da die aber oft sowieso vorhanden sind, würde ich die gar nicht ausschließen, sondern eben dokumentieren wollen.

bis jetzt:

Beachten Sie: Diese Vorgehensweise sollte nur verwendet werden, wenn …

• die Breite des Inhalts vorher bekannt ist

Künftig: Was haltet ihr nach jedem Beispiel von:

Fazit

• margin: auto benötigt zusätzlich
• eine Breitenangabe des Inhalts (die z.B. bei body oft schon vorhanden ist.)

Für ein Feedback wäre ich dankbar - ich würde das dann in der Faschingswoche umsetzen.

Herzliche Grüße

Matthias Scharwies

---

Ich schau immer mal in der alten Doku und träume ja davon, die zum einem Jubiläum als statische Kopie wieder zu veröffentlichen. Dieser Abschnitt zeigt, dass das eben nicht (mal mit nenm Disclaimer) zu empfehlen ist:

Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?

Um Blockelemente zu zentrieren, setzen Sie den linken und rechten Seite Außenabstand auf den Wert auto:

margin-left:auto;
margin-right:auto;

Beachten Sie, dass der Internet Explorer 6 diese Angaben nur dann interpretiert, wenn die Seite im Seite standardkonformen Modus dargestellt wird.

Soll ein Element sowohl horizontal als auch vertikal zentriert werden, bietet sich eine Lösung mit absoluter Seite Positionierung an:

---