Zentrieren im CSS-Raster

179

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>

Rote Beete
quelle
1
Bitte überprüfen Sie den Link w3.org/Style/Examples/007/center.en.html , ich hoffe, es wird hilfreich sein.
Ali

Antworten:

433

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

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


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.


auto Ränder

Verwenden Sie margin: autodiese Option, um Rasterelemente vertikal und horizontal zu zentrieren.

grid-item {
  margin: auto;
}

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


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.

Beachten Sie, dass die vertikale Zentrierung vertical-align: middlenicht funktioniert.

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

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:

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

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

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

Michael Benjamin
quelle
Hallo Michael, ich habe mich gefragt, ob es möglich ist, die Größe jeder Spalte mithilfe des Rasters auf die Größe der kleinsten Spalte in der Zeile zu ändern.
Der Codesee
@ TheCodesee, das kann je nach Ihren Anforderungen möglich sein. Haben Sie ein Codebeispiel? Oder stellen Sie eine neue Frage mit allen Details.
Michael Benjamin
ist grid-container& grid-itemsind HTML-Tags?
DiEcho
1
Sie sind benutzerdefinierte HTML-Tags. Sie können Ihre eigenen Tags erstellen, wie ich es für diese Demo getan habe. stackoverflow.com/q/36380449/3597276 @ pro.mean
Michael Benjamin
5
Dies ist eine wunderbare Antwort, danke. Es machte mir klar, in Ihre beiden ersten Beispiele, dass zwischen flexund grid, align-itemsbleibt gleich , aber aus irgendeinem Grund justify-contentwirdjustify-items
WoJ
11

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>

Vadim Ovchinnikov
quelle
9

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!

Konrad Albrecht
quelle
Ich habe mich über die verschachtelten Gitter gewundert. Danke, dass du mir gezeigt hast, wie es geht, denke ich. Sie denken also, dass Flex mit Grid vermieden werden sollte oder ist es in Ordnung zu kombinieren?
Rote Beete
Es ist in Ordnung zu kombinieren, aber Sie müssen sicher sein, dass Sie das richtige Werkzeug für den Job verwenden. Nehmen Sie sich etwas Zeit und schauen Sie sich die Präsentation von Rachels an, die Ihnen viel über das Thema CSS-Raster verdeutlicht. youtu.be/3vJE3bVoF-Q
Konrad Albrecht
Das Problem mit diesem Ansatz tritt auf, wenn Sie Rahmen für die Rasterelemente verwenden ...
Andrew
2
Dies kann verkürzt werden durch place-self: center;.
DevonDahon
6

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;
}
CloudBranch
quelle
place-itemswird derzeit nicht in edge unterstützt
Konrad Albrecht
1

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>
Younis Ar M.
quelle
-2

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>

Renato siqueira
quelle
1
Nicht ganz. Der Text sollte auch vertikal ausgerichtet sein.
Rote Beete
Verwenden Sie.text{ font-family: Raleway; font-size: large; text-align: center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }
Renato siqueira
-2

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.

Aft3rL1f3
quelle