Ich bin ziemlich bewandert, wenn es um CSS geht, aber heute bin ich über ein Snippet gestolpert, das mir Kopfzerbrechen bereitet hat (hier und hier).
Ich hätte nie gedacht, dass man ein absolut positioniertes Element über zentrieren kann margin: 0 auto aber vorausgesetzt, das betreffende Element hat eine festgelegte Breite und es gibt left: 0 und right: 0, es scheint tatsächlich zu funktionieren:
Ich dachte immer left: 0 und right: 0 bestimmt die Breite des Elements (100% des ersten relativ positionierten übergeordneten Elements), aber es scheint width hat hier Vorrang und macht daher margin: 0 auto arbeiten.
Ist das definiertes Verhalten? Kann ich in irgendeiner Spezifikation etwas darüber finden? Ich habe ein bisschen gegoogelt, aber nichts brauchbares gefunden.
Wenn keiner der drei ‘auto’ ist: Wenn sowohl ‘margin-left’ als auch ‘margin-right’ ‘auto’ sind, lösen Sie die Gleichung unter der zusätzlichen Bedingung, dass die beiden Ränder gleiche Werte erhalten […]
Wie Sie sehen können, verhalten sich automatische Ränder auf beiden Seiten für absolut positionierte Elemente genauso wie für nicht positionierte Elemente auf Blockebene, vorausgesetzt, dass die left und right Offsets, sowie width, sind nicht automatisch.
Interessanterweise nur für absolut positionierte Elemente, Dies gilt für top, height und bottom sowie, was im Wesentlichen bedeutet, dass es möglich ist, ein absolut positioniertes Element mithilfe von automatischen Rändern vertikal zu zentrieren. Dies gilt wiederum unter der Voraussetzung, dass die drei oben genannten Eigenschaften nicht automatisch sind und die jeweiligen Ränder automatisch sind. (In Ihrem Fall bedeutet dies margin: auto eher, als margin: 0 auto da letzteres die vertikalen Ränder auf Null setzt.)
Dies ist die kanonische Antwort!
– Hashem Qolami
25. März ’15 um 17:20 Uhr
Danke für den Hinweis auf die Spezifikation. Ich habe es durchsucht, wusste aber nicht genau, wonach ich suchen sollte.
– Mary ist tot
26. März 15 um 08:21 Uhr
Paulie_D
Die Eigenschaften left und right (und top und bottom) definieren nicht die Breite an sich sondern der Ausgleich der relativen Margen von der jeweiligen Elternseite.
Im Abwesenheit einer definierten Breite und mit als Null deklarierten Offsets wird die Breite anhand der Offsets berechnet.
Wenn Sie dem Block eine Breite oder Höhe zuweisen, wird verhindert, dass der Block den gesamten verfügbaren Platz einnimmt, und der Browser wird gezwungen, margin: auto basierend auf dem neuen Begrenzungsrahmen zu berechnen
MDN – auf “Oben” … und das gleiche gilt für die anderen Eigenschaften.
Für absolut positionierte Elemente (solche mit position: absolute oder position: fixed) gibt es den Abstand zwischen der oberen Randkante des Elements und der oberen Kante seines umgebenden Blocks an.
(Der Link kam zuerst aus dem Kommentar von j08691)
– Martin
25. März 15 um 16:58 Uhr
Entsprechend aktualisiert, da der andere nun gelöscht wurde.
– Paulie_D
25. März 15 um 16:59 Uhr
„Ohne definierte Breite“ werden in diesem Fall die Versätze mit Null deklariert, die Breite wird also anhand der Versätze berechnet und nicht umgekehrt. Daher “auto” Breite.
– BoltClock
25. März 15 um 17:23 Uhr
Tolle Antwort, es war schwer zu entscheiden, wo ich hier das Häkchen setzen soll.
– Mary ist tot
26. März 2015 um 08:18 Uhr
@maryisdead Ich würde es BoltClock geben (was du, wie ich sehe, hast). Er hat geholfen, meine Antwort zu verbessern.
Sehen smashingmagazine.com/2013/08/09/…
– j08691
25. März 15 um 16:49 Uhr
@ j08691 das ist in der Tat ein guter Link. Ich mag den Schritt durch den CSS-Prozess
– Martin
25. März 15 um 16:57 Uhr