wake-up-neo.net

Im CSS-Raster zentrieren

Ich versuche mit CSS Grid eine einfache Seite zu erstellen.

Was ich nicht tue, ist, den Text aus dem HTML in die entsprechenden Gitterzellen zu zentrieren.

Ich habe versucht, Inhalte innerhalb und außerhalb der Selektoren left_bg und right_bg in separaten div zu platzieren, und habe erfolglos mit einigen CSS-Eigenschaften gespielt.

Wie mache ich das?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}
<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>
97
beetroot

Diese Antwort besteht aus zwei Hauptabschnitten:

  1. Grundlegendes zur Ausrichtung in CSS Grid.
  2. Sechs Methoden zum Zentrieren in CSS Grid.

Wenn Sie nur an den Lösungen interessiert sind, überspringen Sie den ersten Abschnitt.


Die Struktur und der Umfang des Rasterlayouts

Um zu verstehen, wie die Zentrierung in einem Rastercontainer funktioniert, müssen Sie zunächst die Struktur und den Umfang des Rasterlayouts kennen.

Die HTML - Struktur eines Gittercontainers hat drei Ebenen:

  • der Kontainer
  • der Gegenstand
  • der Inhalt

Jede dieser Ebenen ist in Bezug auf die Anwendung der Rastereigenschaften unabhängig von den anderen.

Das scope eines Grid-Containers ist auf eine Eltern-Kind-Beziehung beschränkt.

Dies bedeutet, dass ein Rastercontainer immer das übergeordnete Element und ein Rasterelement immer das untergeordnete Element ist. Rastereigenschaften funktionieren nur innerhalb dieser Beziehung.

Nachkommen eines Rastercontainers außerhalb der untergeordneten Elemente sind nicht Teil des Rasterlayouts und akzeptieren keine Rastereigenschaften. (Zumindest erst, wenn die Funktion subgrid implementiert wurde, mit der Nachkommen von Rasterelementen die Zeilen des primären Containers berücksichtigen können. )

Hier ist ein Beispiel für die oben beschriebenen Struktur- und Geltungsbereichskonzepte.

Stellen Sie sich ein Tic-Tac-Toe-ähnliches Gitter vor.

_article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}
_

enter image description here

Sie möchten, dass die X und O in jeder Zelle zentriert sind.

So wenden Sie die Zentrierung auf Containerebene an:

_article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}
_

Aufgrund der Struktur und des Umfangs des Rasterlayouts zentriert _justify-items_ auf dem Container die Rasterelemente, nicht den Inhalt (zumindest nicht direkt).

enter image description here

_article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}_
_<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>_

Dasselbe Problem mit _align-items_: Der Inhalt ist möglicherweise als Nebenprodukt zentriert, aber Sie haben das Layoutdesign verloren.

_article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}
_

enter image description here

_article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}_
_<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>_

Um den Inhalt zu zentrieren, müssen Sie einen anderen Ansatz wählen. Unter erneuter Bezugnahme auf die Struktur und den Umfang des Rasterlayouts müssen Sie das Rasterelement als übergeordnetes Element und den Inhalt als untergeordnetes Element behandeln.

_article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}
_

enter image description here

_article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}_
_<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>_

jsFiddle demo


Sechs Methoden zum Zentrieren im CSS-Raster

Es gibt mehrere Methoden zum Zentrieren von Rasterelementen und deren Inhalten.

Hier ist ein einfaches 2x2-Gitter:

_grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}_
_<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>_

Flexbox

Verwenden Sie flexbox, um den Inhalt von Rasterelementen auf einfache Weise zu zentrieren.

Insbesondere machen Sie das Gitterelement zu einem flexiblen Container.

Bei dieser Methode liegt kein Konflikt, kein Verstoß gegen die Spezifikation oder ein anderes Problem vor. Es ist sauber und gültig.

_grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
_
_grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}_
_<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>_

In diesem Beitrag finden Sie eine vollständige Erklärung:


Gitterstruktur

So wie ein Flex-Item auch ein Flex-Container sein kann, kann ein Grid-Item auch ein Grid-Container sein. Diese Lösung ähnelt der obigen flexbox -Lösung, mit der Ausnahme, dass die Zentrierung mit Rastereigenschaften und nicht mit Flex-Eigenschaften erfolgt.

_grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}_
_<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>_

auto Ränder

Verwenden Sie _margin: auto_, um Rasterelemente vertikal und horizontal zu zentrieren.

_grid-item {
  margin: auto;
}
_
_grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}_
_<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>_

Um den Inhalt von Rasterelementen zu zentrieren, müssen Sie das Element in einen Raster- (oder Flex-) Container umschließen, indem Sie anonyme Elemente in ihre eigenen Elemente einschließen ( , da sie von CSS nicht direkt als Ziel ausgewählt werden können . und wenden Sie die Ränder auf die neuen Elemente an.

_grid-item {
  display: flex;
}

span, img {
  margin: auto;
}
_
_grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}_
_<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>_

Box Alignment Properties

Lesen Sie den Abschnitt über auto Ränder, wenn Sie erwägen, die folgenden Eigenschaften zum Ausrichten von Rasterelementen zu verwenden.

  • _align-items_
  • _justify-items_
  • _align-self_
  • _justify-self_

https://www.w3.org/TR/css-align-3/#property-index


_text-align: center_

Um den Inhalt in einem Rasterelement horizontal zu zentrieren, können Sie die Eigenschaft text-align verwenden.

_grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}_
_<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>_

Beachten Sie, dass für die vertikale Zentrierung _vertical-align: middle_ nicht funktioniert.

Dies liegt daran, dass die Eigenschaft vertical-align nur für Inline- und Tabellenzellencontainer gilt.

_grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}_
_<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>_

Man könnte sagen, dass _display: inline-grid_ einen Container auf Inline-Ebene erstellt, und das wäre wahr. Warum funktioniert _vertical-align_ in Rasterelementen nicht?

Der Grund dafür ist, dass in einem - Rasterformatierungskontext Elemente als Elemente auf Blockebene behandelt werden.

6.1. Anzeige der Rasterelemente

Der display-Wert eines Rasterelements ist blockified : wenn der angegebene display eines untergeordneten Eingangs eines Elements, das ein Raster generiert container ist ein Inline-Level-Wert, der mit seinem Block-Level-Äquivalent berechnet wird.

In einem - Blockformatierungskontext , für den die Eigenschaft _vertical-align_ ursprünglich entwickelt wurde, erwartet der Browser nicht, dass ein gefunden wird Element auf Blockebene in einem Container auf Inline-Ebene. Das ist ungültiges HTML.


CSS-Positionierung

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 wollen:

Setzen Sie einfach _position: absolute_ auf das zu zentrierende Element und _position: relative_ auf den Vorfahren, der als umschließender Block dient (normalerweise der übergeordnete Block). Etwas wie das:

_grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
_
_grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}_
_<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>_

Hier ist eine vollständige Erklärung, wie diese Methode funktioniert:

Hier ist der Abschnitt zur absoluten Positionierung in der Grid-Spezifikation:

227
Michael_B

Sie können flexbox verwenden, um Ihren Text zu zentrieren. Übrigens werden keine zusätzlichen Container benötigt, da der Text als anonymer Flexartikel betrachtet wird.

Aus Flexbox-Spezifikationen :

Jedes eingehende untergeordnete Element eines flexiblen Containers wird zu einem flexiblen Element . und jede zusammenhängende Textfolge, die direkt in einem flexiblen Container enthalten ist, wird in ein anonymes flexibles Element . Ein anonymes Flex-Objekt, das nur Leerzeichen enthält (dh Zeichen, die vom white-space Eigenschaft) wird nicht gerendert (so als wäre es display:none).

Erstellen Sie also Rasterelemente als flexible Container (display: flex) und fügen Sie align-items: center und justify-content: center hinzu, um sie vertikal und horizontal zu zentrieren.

Auch Optimierung von HTML und CSS durchgeführt:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}
<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>
8

Versuchen Sie nicht einmal, flex zu verwenden. Bleib bei CSS Grid !! :)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

macht hier die Zentrierarbeit.

Wenn Sie etwas zentrieren möchten, das sich in div befindet, das sich in der Rasterzelle befindet, müssen Sie ein verschachteltes Raster definieren, damit es funktioniert. (Bitte schauen Sie sich die beiden gezeigten Beispiele an.)

https://css-tricks.com/snippets/css/complete-guide-grid/

Prost!

1
Konrad Albrecht

Versuchen Sie es mit flex:

Plunker-Demo: https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>
0
Younis Ar M