In CSS zentrieren

Befolgen Sie fünf Zentrierungstechniken, während sie eine Reihe von Tests durchführen, um festzustellen, welches am stärksten gegen Veränderungen reagiert.

Adam Argyle

Die Einbindung in CSS ist eine berüchtigte Herausforderung, die voller Witze und Spott ist. 2020 CSS ist erwachsen geworden und jetzt können wir ehrlich über diese Witze lachen, nicht mehr zusammengepressten Zähnen.

Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:

Die Herausforderung

Es gibt verschiedene Arten der Zentrierung. Aus unterschiedlichen Anwendungsfällen, zu zentrieren usw. Um eine Begründung für einen "Gewinner" zu zeigen. Zentrierungstechnik, habe ich schuf „The Resilience Ringer“. Es ist eine Reihe von Stresstests für jede und Sie können deren Leistung beobachten. Am Ende gebe ich die Technik mit der höchsten Punktzahl sowie die wertvollste Technik an. Hoffentlich haben Sie die neuen Zentrierungstechniken und -lösungen kennengelernt.

Der Widerstandsringer

Der Widerstandsringer spiegelt meine Überzeugung wider, dass eine innere Mitte Die Strategie sollte mit internationalen Layouts, unterschiedlich großen Darstellungsbereichen, Textbearbeitungen und dynamischen Inhalte. Diese Grundsätze trugen zur Entwicklung der folgenden Robustheitstests bei und Zentrierungstechniken anwenden:

  1. Gedrückt: Breitenänderungen problemlos standhalten können
  2. Gedrückt: Höhenänderungen können beim Zentrieren verarbeitet werden.
  3. Duplikat: Die Zentrierung sollte dynamisch für die Anzahl der Elemente sein
  4. Bearbeiten: Die Zentrierung sollte im Hinblick auf Länge und Sprache des Inhalts dynamisch sein.
  5. Ablauf: Die Zentrierung sollte unabhängig von der Dokumentrichtung und dem Schreibmodus sein

Die erfolgreiche Lösung sollte ihre Belastbarkeit unter Beweis stellen, indem sie die Inhalte während das Quetschen, Zusammendrücken, Duplizieren, Bearbeiten und Verschieben Sprachmodi und Richtungen. Zuverlässige und belastbare Zentrale, einer sicheren Plattform

Legende

Hier findest du visuelle Farbhinweise, die dir dabei helfen, einige Meta-Informationen im Kontext:

  • Ein rosa Rahmen weist auf die Inhaberschaft von Zentrierungsstilen hin.
  • Das graue Feld ist der Hintergrund des Containers und soll zentriert werden. Elemente
  • Jedes untergeordnete Element hat einen weißen Hintergrund, sodass Sie alle Effekte sehen können, Die Zentrierungstechnik umfasst untergeordnete Boxgrößen (falls vorhanden).

Die 5 Teilnehmer

5 Zentrierungstechniken treten in den Widerstandsringer ein – nur eine erhält den Robustheitskrone 👸.

1. Inhaltscenter

<ph type="x-smartling-placeholder">
</ph>
Bearbeiten und Duplizieren von Inhalten mit VisBug
  1. Squish: Super!
  2. Squash: Sehr gut!
  3. Duplikat: Ausgezeichnet!
  4. Bearbeiten: Sehr gut!
  5. Ablauf: Sehr gut!

Es wird schwierig sein, die Prägnanz von display: grid und die Abkürzung place-content. Da es Kinder in den Mittelpunkt stellt und sie zusammen rechtfertigt, ist dies eine solide Zentrierungstechnik für Gruppen von Elementen, die gelesen werden sollen.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Vorteile
  • Inhalte werden auch bei wenig Platz und Überlauf zentriert
  • Bearbeitungen zentrieren und Wartung an einem Ort
  • Lücke garantiert den gleichen Abstand unter n untergeordneten Elementen
  • Raster erstellt standardmäßig Zeilen
Nachteile
  • Durch das breiteste untergeordnete Element (max-content) wird die Breite für die restlichen Elemente festgelegt. Dies ist Gentle Flex.

Ideal für Makro-Layouts mit Absätzen und Überschriften, Prototypen oder im Allgemeinen Dinge, bei denen eine lesbare Zentrierung erforderlich ist.

2. Sanfte Flexion

  1. Squish:Super!
  2. Squash:Super!
  3. Duplikat:Sehr gut!
  4. Bearbeiten:Sehr gut!
  5. Ablauf:Großartig!

Gentle Flex ist eine ausschließlich nur zur Zentrierung verwendete Strategie. Es ist weich und sanft, Im Gegensatz zu place-content: center werden die Box-Größen der untergeordneten Elemente während der zentriert werden. Alle Elemente werden so sanft wie möglich gestapelt, zentriert und verteilt.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Vorteile
  • Handles nur Ausrichtung, Richtung und Verteilung
  • Bearbeitungen und Verwaltung an einem Ort
  • Lücke garantiert den gleichen Abstand unter n untergeordneten Elementen
Nachteile
  • Die meisten Codezeilen

Ideal für sowohl Makro- als auch Mikro-Layouts.

3. Logo: Autobot

  1. Squish:hervorragend
  2. Squash:hervorragend
  3. Duplikat:Bußgeld
  4. Bearbeiten:sehr gut
  5. Ablauf:sehr gut

Der Container ist auf Flex ohne Ausrichtungsstile festgelegt, während die direkten untergeordneten Elemente automatisch erstellte Ränder. Es hat etwas Nostalgisches und Wunderbares margin: auto arbeitet an allen Seiten des Elements.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Vorteile
  • Lustiger Trick
  • Schnell und schmutzig
Nachteile
  • Unangenehme Ergebnisse, wenn das Gerät überläuft
  • Die Abhängigkeit von der Verteilung anstelle von Gap bedeutet, dass Layouts bei untergeordneten Elementen auftreten können. berührte Seiten
  • „Push“-Effekt nicht optimal erscheinen und zu einer Veränderung führen kann, auf die Box-Größe des untergeordneten

Ideal zum Zentrieren von Symbolen oder Pseudoelementen.

4. Flauschiges Zentrum

  1. Squish:schlecht
  2. Squash:fehlerhaft
  3. Duplikat:fehlerhaft
  4. Bearbeiten:Sehr gut!
  5. Ablauf:Großartig! (sofern Sie logische Attribute verwenden)

Mitbewerber „Fluffy Center“ ist unser leckerster Kontensator und der einzige Zentrierungstechnik, die vollständig Eigentum/untergeordnet ist. Unser Solo-Inner Rosa Rahmen!?

.fluffy-center {
  padding: 10ch;
}
Vorteile
  • Schützt Inhalte
  • Atomkatastrophe
  • Jeder Test beinhaltet heimlich diese Zentrierungsstrategie.
  • Wortabstand ist Lücke
Nachteile
  • Illusion, nicht nützlich zu sein
  • Zwischen dem Behälter und den Objekten besteht ein Konflikt. sind bei der Größe

Ideal für die Zentrierung von Wörtern oder Wortgruppen, Tags, Pillen, Schaltflächen, Chips und mehr.

5. Pop und Plop

  1. Squish:okay
  2. Squash:okay
  3. Duplikat:fehlerhaft
  4. Bearbeiten:in Ordnung
  5. Ablauf:in Ordnung

Dieser „Knaller“ da die absolute Positionierung das Element aus der Normalität heraushebt. Ablauf. Der „Pup“ dass ein Teil der Namen darauf zurückzuführen ist, dass ich ihn am nützlichsten finde: und es auf andere Sachen legt. Es ist ein klassisches und praktisches Overlay-Zentrieren die flexibel und dynamisch ist. Manchmal brauchen Sie nur um UI über andere UI zu legen.

Vorteile
  • Hilfreich
  • Zuverlässig
  • Wenn Sie sie brauchen, sind sie von unschätzbarem Wert
Nachteile
  • Code mit negativen Prozentwerten
  • Erfordert position: relative, um einen enthaltenden Block zu erzwingen
  • Frühe und unangenehme Zeilenumbrüche
  • Ohne zusätzlichen Aufwand kann nur ein Block pro einschließendem Block vorhanden sein

Ideal für Modi, Toasts und Botschaften, Stacks, Tiefeneffekte, Popovers.

Gewinner

Wenn ich auf einer Insel wäre und nur eine Zentrierungstechnik anwenden könnte, wäre es...

[Trommelwirbel]

Sanfter Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Sie ist immer in meinen Stylesheets zu finden, da sie sowohl für Makro- Mikrolayouts. Es ist eine rundum zuverlässige Lösung mit Ergebnissen, die meinen Erwartungen erfüllt. Da ich ein unverzichtbarer Größen-Junkie bin, mache ich eher einen Abschluss in diese Lösung einfließen lassen. Es ist zwar recht mühsam, es zu tippen, aber es hat seine Vorteile. den zusätzlichen Code überwiegt.

MVP (Minimum Viable Product)

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center ist so klein, dass man es leicht als Zentrierungstechnik übersehen kann. aber es ist ein fester Bestandteil meiner Zentrierungsstrategien. Es ist so atomar, dass ich manchmal den ich gerade benutze.

Fazit

Welche Dinge funktionieren gegen deine Zentrierungsstrategien? Welche weiteren Herausforderungen für die Widerstandsfähigkeit? Ich habe über eine Übersetzung nachgedacht die automatische Höhenverringerung am Container... und was noch?

Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! Wir diversifizieren unsere Ansätze und lernen alle Möglichkeiten kennen, das Web zu entwickeln. Folgen Sie dem Codelab in diesem Beitrag, um erstellen Sie Ihr eigenes Zentrierungsbeispiel, wie in diesem Beitrag. Tweeten und füge sie dem Community-Remixe unten.

Community-Remixe