Zentrieren im CSS-Raster

Ich versuche, eine einfache Seite mit CSS Grid zu erstellen.

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

Ich habe Platzierung Inhalt versucht , in separaten divs sowohl innerhalb als auch außerhalb der left_bgund right_bgWähler und spielt mit einigen der CSS - Eigenschaften ohne Erfolg.

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>

Diese Antwort besteht aus zwei Hauptabschnitten:

1. Verstehen, wie die Ausrichtung in CSS Grid funktioniert.
2. Sechs Methoden zum Zentrieren in CSS Grid.

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

Struktur und Umfang des Rasterlayouts

Um zu verstehen, wie die Zentrierung in einem Rastercontainer funktioniert, ist es wichtig, zunächst die Struktur und den Umfang des Rasterlayouts zu verstehen.

Die HTML- Struktur eines Rastercontainers besteht aus drei Ebenen:

• der Kontainer
• der Gegenstand
• der Inhalt

Jede dieser Ebenen ist hinsichtlich der Anwendung der Rastereigenschaften unabhängig von den anderen.

Der Umfang eines Rastercontainers 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 nicht, bis die subgridFunktion implementiert wurde, mit der Nachkommen von Rasterelementen die Zeilen des Primärcontainers respektieren können.)

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

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;
}

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

Sie wenden also 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 justify-itemszentriert der Container die Rasterelemente und nicht den Inhalt (zumindest nicht direkt).

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>

Gleiches Problem mit align-items: Der Inhalt wird 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;
}

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;
}

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 zur Zentrierung im CSS-Raster

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

Hier ist ein grundlegendes 2x2-Raster:

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 die Flexbox, um den Inhalt von Rasterelementen auf einfache Weise zu zentrieren.

Machen Sie das Gitterelement genauer zu einem flexiblen Container.

Bei dieser Methode liegt kein Konflikt, keine Spezifikationsverletzung 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:

• So zentrieren Sie Elemente vertikal und horizontal in Flexbox

Gitterstruktur

Ebenso wie ein Flex-Element auch ein Flex-Container sein kann, kann ein Rasterelement auch ein Raster-Container sein. Diese Lösung ähnelt der obigen Flexbox-Lösung, außer dass die Zentrierung mit Raster- 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: autodiese Option, 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 Rastercontainer (oder Flexcontainer) verwandeln, anonyme Elemente in ihre eigenen Elemente einschließen ( da sie nicht direkt von CSS als Ziel ausgewählt werden können ) und die Ränder auf die neuen Elemente anwenden.

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>

Eigenschaften der Boxausrichtung

Wenn Sie die folgenden Eigenschaften zum Ausrichten von Rasterelementen verwenden möchten, lesen Sie den Abschnitt über die autoRänder oben.

• 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 text-alignEigenschaft 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 die vertikale Zentrierung vertical-align: middlenicht funktioniert.

Dies liegt daran, dass die vertical-alignEigenschaft 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 dies display: inline-grideinen Inline-Container erstellt, und das wäre wahr. Warum funktioniert das nicht vertical-alignin Rasterelementen?

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

6.1. Anzeige von Rasterelementen

Der displayWert eines Rasterelements wird blockiert : Wenn die Angabe displayeines untergeordneten In-Flow-Elements eines Elements, das einen Rastercontainer generiert, ein Wert auf Inline-Ebene ist, wird das Äquivalent auf Blockebene berechnet.

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

CSS-Positionierung

Schließlich gibt es eine allgemeine CSS-Zentrierungslösung, die auch in Grid funktioniert: die absolute Positionierung

Dies ist eine gute Methode zum Zentrieren von Objekten, die aus dem Dokumentfluss entfernt werden müssen. Zum Beispiel, wenn Sie möchten:

• Text über einem Bild zentrieren oder
• Platzieren Sie Sternchen (*) über den erforderlichen Formularfeldern

Legen Sie einfach position: absolutedas zu zentrierende Element und position: relativeden Vorfahren fest, der als enthaltender 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:

• Das Element bleibt nicht zentriert, insbesondere wenn die Größe des Bildschirms geändert wird

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

• https://www.w3.org/TR/css3-grid-layout/#abspos

Sie können Flexbox verwenden, um Ihren Text zu zentrieren. Übrigens sind keine zusätzlichen Container erforderlich, da Text als anonymes Flex-Element betrachtet wird.

Aus den Flexbox-Spezifikationen :

Jedes untergeordnete Element eines Flex-Containers wird zu einem Flex-Element , und jeder zusammenhängende Textlauf, der direkt in einem Flex-Container enthalten ist, wird in ein anonymes Flex-Element eingeschlossen . Ein anonymes Flex-Element, das nur Leerzeichen enthält (dh Zeichen, die von der white-spaceEigenschaft betroffen sein können ), wird jedoch nicht gerendert (als wäre es so display:none).

So stellt gerade Rasterelemente als Flex - Container ( display: flex) und fügen align-items: centerund justify-content: centersowohl vertikal als auch horizontal zu zentrieren.

Optimierte auch HTML und CSS:

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>

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, divdas sich innerhalb der Gitterzelle befindet, müssen Sie ein verschachteltes Gitter definieren, damit es funktioniert. (Bitte schauen Sie sich die Geige an, die beide dort gezeigten Beispiele zeigen.)

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

Prost!

Die Shorthand-Eigenschaft " CSS- Platzierungselemente" legt die Eigenschaften "Ausrichtungselemente" und "Ausrichtungselemente" fest. Wenn der zweite Wert nicht eingestellt ist, wird auch der erste Wert dafür verwendet.

.parent {
  display: grid;
  place-items: center;
}

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>

Du willst 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;
}

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

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

Ich weiß, dass diese Frage ein paar Jahre alt ist, aber ich bin überrascht, dass niemand vorgeschlagen hat:

   text-align: center;

Dies ist eine universellere Eigenschaft als der Rechtfertigungsinhalt und definitiv nicht nur für das Raster, aber ich finde, dass beim Umgang mit Text, worum es in dieser Frage speziell geht, der Text an der Mitte ausgerichtet wird, ohne den Raum zu beeinträchtigen zwischen Gitterelementen oder der vertikalen Zentrierung. Der Text wird horizontal zentriert, wo er auf seiner vertikalen Achse steht. Ich finde es auch, eine Komplexitätsebene zu entfernen, die Inhalte rechtfertigt und Elemente ausrichtet. Das Ausrichten von Inhalten und das Ausrichten von Elementen wirkt sich auf das gesamte Rasterelement oder die Elemente aus. Das Ausrichten von Text zentriert den Text, ohne den Container zu beeinflussen, in dem er sich befindet. Ich hoffe, dies hilft.