Früher war das Zentrieren von Elementen mit ziemlich schwierig. Nun, das ist es nicht mehr. Es gibt mittlerweile viele verschiedene Möglichkeiten, dies zu tun. Und das ist gut so, denn in verschiedenen Szenarien benötigen wir möglicherweise unterschiedliche Optionen. In diesem Video sehen wir uns drei meiner Lieblingsmethoden zum Zentrieren von Elementen an: Wir verwenden die Positionierung, dann verwenden wir Flexbox und schließlich verwenden wir mein bevorzugtes CSS-Raster. HTML und CSS Okay, lasst uns loslegen. https://youtu.be/XMH4c1xIZtE?embedable=true Es ist wirklich so seltsam, dass es so lange so schwierig war, Elemente einfach in der Mitte eines Containers im Web zu platzieren. Nun, die horizontale Zentrierung war einfach, aber die vertikale Zentrierung war bis in die letzten Jahre nahezu unmöglich. Verwenden der CSS-Positionierung zum Zentrieren von Elementen Diese erste Methode, die CSS-Positionierung verwendet, gibt es wahrscheinlich am längsten, sie hat sich jedoch ein wenig weiterentwickelt, da neuere Eigenschaften auf den Markt kamen. Schauen wir uns ein Beispiel an. Hier haben wir dieses Kästchen, das wir in diesem anderen Container mit dem roten Rand zentrieren möchten. Es ist ein starkes Element und wird direkt innerhalb eines Elements platziert, welches das rote Kästchen ist, das wir hier sehen. div Wir werden für diese Methode die absolute Positionierung verwenden, also fügen wir sie zu unserem Element hinzu. strong strong { position: absolute; } Damit dies nun ordnungsgemäß funktioniert, muss unser einen Positionierungskontext erstellen, in dem unser Artikel positioniert werden soll. Es gibt viele verschiedene Möglichkeiten, dies zu tun, aber die beste Option für dieses Beispiel ist die relative Positionierung. div div { position: relative; } Jetzt können wir unser Element um fünfzig Prozent der Höhe unseres und über fünfzig Prozent der Breite nach unten positionieren. Um von oben nach unten zu positionieren, können wir die neue logische Eigenschaft mit einem Wert von fünfzig Prozent verwenden. Und um von links nach oben zu positionieren, können wir mit dem gleichen Wert von fünfzig Prozent verwenden. div inset-block-start inset-inline-start strong { ... inset-block-start: 50%; inset-inline-start: 50%; } Ok, es ist also nicht genau zentriert, oder? Das liegt daran, dass wir das Element in der Mitte unseres positioniert haben, seine Position jedoch auf seiner oberen linken Ecke basiert. Was wir jetzt tun müssen, ist, das Objekt wieder um fünfzig Prozent seiner Höhe nach oben und um mehr als fünfzig Prozent seiner Breite nach hinten zu verschieben. Dadurch wird es richtig in der Mitte platziert. Aber wie können wir das tun? div Es ist eigentlich ganz einfach. Wir können die neue CSS- verwenden. Der erste Wert wird entlang der x-Achse verschoben. Wir müssen um fünfzig Prozent zurückgehen, also fügen wir einen Wert von negativen fünfzig Prozent hinzu. Und wenn der zweite Wert entlang der Y-Achse verschoben wird, geben wir ihm den gleichen Wert von minus fünfzig Prozent. translate strong { ... translate: -50% -50%; } Und los geht's. Perfekt zentriert. Hier ist das letzte Arbeitsbeispiel mit Positionierung und Übersetzung: https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true Das ist also eine Möglichkeit, wie wir es machen können, aber es ist nicht meine Lieblingsmethode. Verwenden von Flexbox zum Zentrieren von Elementen Wenn ich kann, bevorzuge ich die Verwendung von Flexbox gegenüber der Positionierung, weil es noch einfacher ist, weniger Codezeilen erfordert, keinen Positionierungskontext erfordert und ehrlich gesagt einfach eine bessere, modernere Lösung zu sein scheint. Schauen wir uns ein Beispiel an. Ok, wir beginnen also am selben Punkt, wir haben unser äußeres Div mit dem roten Rand und dann unser inneres starkes Element. Wir beginnen damit, dass wir aus unserem Div einen Flex-Container mit Display machen, Flex. Dann können wir unser Element mit der Eigenschaft und dem Wert „center“ an der Mitte entlang der x-Achse ausrichten. Und zu guter Letzt können wir mit der Eigenschaft und dem gleichen Wert von center eine Ausrichtung entlang der y-Achse durchführen. justify-content align-items div { display: flex; justify-content: center; align-items: center; } Und da haben Sie es: Das Element ist richtig zentriert und dieses Mal waren nur drei Codezeilen erforderlich, um dorthin zu gelangen. Hier ist das letzte Arbeitsbeispiel mit Flexbox: https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true Das ist cool und manchmal muss ich das tun, aber meine Lieblingsmethode zum Positionieren von Elementen in der Mitte ist die Verwendung eines CSS-Rasters. Und noch einmal: Meine Gründe dafür sind, dass es noch einfacher als ist und noch weniger Code erfordert. flex Verwenden des Rasters zum Zentrieren von Elementen Ok, derselbe Ausgangspunkt mit der roten Box und dem inneren Element. Dieses Mal machen wir unser Div zu einem Grid-Container mit dem . Das Coole daran ist, dass wir bei Bedarf dieselben zwei Eigenschaften verwenden können, die wir für unser Flexbox-Beispiel verwendet haben. Wir können und hinzufügen. Es funktioniert genauso. display grid justify-content: center align-items: center div { display: grid; justify-content: center; align-items: center; } Irgendwie lustig, aber so funktioniert Grid. Es kann dieselben Box-Ausrichtungseigenschaften verwenden wie Flexbox. Aber wenn wir es so belassen würden, gäbe es wirklich keinen Vorteil, Grid zu verwenden, oder? Stattdessen können wir diese Ausrichtungseigenschaften entfernen und durch die Eigenschaft „place-items“ ersetzen. Und wir können dieser Eigenschaft den Wert „center“ zuweisen. div { display: grid; place-items: center; } Jetzt haben wir es auf nur noch zwei CSS-Zeilen reduziert. Hier ist das letzte funktionierende Beispiel mit CSS Grid: https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true Abschluss Wie ich bereits sagte, ist es mit Sicherheit viel einfacher als früher. Aber alle diese Techniken sind immer noch sehr relevant und können aufgrund einer Reihe von Umständen erforderlich sein, daher ist es für alle Fälle gut, sie alle zu kennen. Ich würde auf jeden Fall das CSS-Raster mit der geringsten Codemenge bevorzugen, und wenn das nicht funktioniert, ist die nächstbeste Option Flexbox, und wenn keines davon funktioniert, versuchen Sie es mit der Positionierung. Auch veröffentlicht. hier

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Making security fun one episode at a time

3 moderne CSS-Techniken zum Zentrieren von Elementen

Zu lang; Lesen

Brian Treese

About Author

Hängeetiketten

Languages

DIESER ARTIKEL WURDE VORGESTELLT IN...

3 moderne CSS-Techniken zum Zentrieren von Elementen

Zu lang; Lesen

Brian Treese

About Author

Hängeetiketten

Languages

DIESER ARTIKEL WURDE VORGESTELLT IN...

ÄHNLICHE BEITRÄGE