Ich versuche eine einfache Seite mit CSS Grid zu erstellen.
Was ich nicht tun kann, ist den Text aus dem HTML-Code in die entsprechenden Gitterzellen zu zentrieren.
Ich habe versucht, Inhalt in separate div s innerhalb und außerhalb der% selectors left_bg und right_bg zu setzen und mit einigen der CSS Eigenschaften ohne Erfolg zu spielen.
Wie mache ich das?
Das Zentrieren von Inhalten in Rasterelementen ist nicht so kompliziert, wie es scheint. Es ist eigentlich ziemlich einfach und es gibt mehrere Methoden.
Hier ist ein einfaches 2x2-Gitter:
Für eine einfache und einfache Zentrierungslösung benutzen Sie einfach flexbox.
Mit anderen Worten, mach das Gitterobjekt zu einem flexiblen Container.
Es gibt keinen Konflikt, keine Spec-Verletzung oder andere Probleme mit dieser Methode. Es ist sauber und gültig.
%Vor%
Siehe diesen Beitrag für eine vollständige Erklärung:
So wie ein Flex-Objekt auch ein Flex-Container sein kann, kann ein Rasterelement auch ein Raster-Container sein. Diese Lösung ähnelt der obigen flexbox-Lösung, mit der Ausnahme, dass die Zentrierung mit Gitter-, nicht mit Flex-Eigenschaften erfolgt.
auto ränder Die Verwendung von margin: auto zur vertikalen und horizontalen Zentrierung von Gitterelementen funktioniert oft gut.
Sie müssen nur daran denken, dass diese Methode das Element zentriert und nicht den Inhalt des Elements.
%Vor%
Manchmal gibt es ein wenig Verwirrung zwischen Gitterelementen und ihrem Inhalt: Einige Leute betrachten sie als ein Element.
Tatsächlich hat die HTML-Struktur eines Grid-Containers drei Ebenen:
Daher repräsentiert der Inhalt eines Artikels nicht den Artikel; es stellt ein separates Element dar.
Wenn der Inhalt eines Elements Text ist, wird er zu einem anonymen Element.
Aus der CSS-Spezifikation:
Jeder Text, der direkt in einem Blockcontainerelement enthalten ist muss als anonymes Inline-Element behandelt werden.
Die Grid-Spezifikation bietet ein ähnliches Verhalten.
Jeder zusammenhängende Text, der direkt in einem Raster enthalten ist Container ist in einem anonymen Rasterelement eingeschlossen.
Um auto margins zu verwenden, müssen Sie das Element in einen Gitter- (oder Flex-) Container umwandeln und anonyme Elemente in ihre eigenen Elemente einschließen ( da sie nicht direkt von CSS angesteuert werden können ) und die Ränder auf das neue Element anwenden.
Wenn Sie die folgenden Eigenschaften zum Ausrichten von Rasterelementen in Betracht ziehen, lesen Sie den Abschnitt auto margins oben.
align-items justify-items align-self justify-self text-align: center Um Inhalt horizontal in einem Rasterelement zu zentrieren, können Sie das % verwenden. co_de% Eigenschaft.
Beachten Sie, dass text-align für die vertikale Zentrierung nicht funktioniert.
Dies liegt daran, dass vertical-align: middle Eigenschaft gilt nur für Inline- und Tabellenzellencontainer.
Man könnte sagen, dass vertical-align einen Inline-Level-Container erstellt, und das wäre wahr. Warum funktioniert display: inline-grid nicht in Rasterelementen?
Der Grund ist, dass in einem Grid-Formatierungskontext , Elemente werden als Elemente auf Blockebene behandelt.
anDer
vertical-align-Wert eines Rasterelements ist blocked : wenn der angegebendisplayeines In-Flow-Child eines Elements, das a generiert Grid-Container ist ein Inline-Level-Wert, den er berechnet Entsprechung auf Blockebene.
In einem Block-Formatierungskontext , etwas, das display Eigenschaft wurde ursprünglich entworfen, der Browser erwartet nicht, ein Block-Level-Element in einem Inline-Level-Container zu finden. Das ist ungültiges HTML.
Schließlich gibt es eine allgemeine CSS-Zentrierungslösung, die auch in Grid funktioniert: absolute Positionierung
Dies ist eine gute Methode zum Zentrieren von Objekten, die aus dem Dokumentenfluss entfernt werden müssen. Zum Beispiel, wenn Sie möchten:
Setzen Sie einfach vertical-align auf das Element, das zentriert werden soll, und position: absolute auf den Vorgänger, der als umgebender Block dient (normalerweise der Elternteil). Etwas wie das:
Hier ist eine vollständige Erklärung dafür, wie diese Methode funktioniert:
Hier ist der Abschnitt zur absoluten Positionierung in der Grid-Spezifikation:
Sie können flexbox verwenden, um Ihren Text zu zentrieren. Übrigens keine Notwendigkeit für zusätzliche Container, weil Text als anonymer Flex-Artikel betrachtet wird.
Von flexbox specs :
Jedes In-Flow-Kind eines Flex-Containers wird zu einem flex item , und jeder zusammenhängende Text, der direkt in einem flex container ist in einem anonymen Flex-Element . Ein anonymer Flex-Gegenstand, der nur Leerraum enthält (dh Zeichen, die von der
white-space-Eigenschaft betroffen sein, wird nicht gerendert (so als ob es warendisplay:none).
Machen Sie also einfach Gitterobjekte als Flex-Container ( display: flex ) und fügen Sie align-items: center und justify-content: center hinzu, um sowohl vertikal als auch horizontal zu zentrieren.
Auch Optimierung von HTML und CSS:
Versuche nicht einmal, Flex zu benutzen; Bleiben Sie mit CSS Gitter! :)
%Vor%macht hier die Zentrierung.
Wenn Sie etwas, das sich in div innerhalb der Gitterzelle befindet, zentrieren wollen, müssen Sie ein verschachteltes Gitter definieren, damit es funktioniert. (Sehen Sie sich die beiden gezeigten Beispiele an.)
Prost!