Centrage dans la grille CSS

Question

J'essaie de créer une page simple avec une grille CSS.

Ce que je ne parviens pas à faire, c'est centrer le texte du HTML dans les cellules respectives de la grille.

J'ai essayé de placer le contenu dans des endroits séparés div à l'intérieur et à l'extérieur de la left_bg y right_bg et en jouant avec certaines des propriétés CSS, sans résultat.

Comment dois-je m'y prendre ?

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>

Answer 1

Cette réponse comporte deux sections principales :

1. Comprendre le fonctionnement de l'alignement dans la grille CSS.
2. Six méthodes de centrage dans la grille CSS.

Si vous n'êtes intéressé que par les solutions, sautez la première section.

---

La structure et la portée de la mise en grille

Pour bien comprendre comment le centrage fonctionne dans un conteneur de grille, il est important de comprendre d'abord la structure et la portée de la mise en page de la grille.

Le HTML structure d'un conteneur de grille a trois niveaux :

• le conteneur
• l'article
• le contenu

Chacun de ces niveaux est indépendant des autres, en termes d'application des propriétés de la grille.

El portée d'un conteneur de grille est limitée à une relation parent-enfant.

Cela signifie qu'un conteneur de grille est toujours le parent et qu'un élément de grille est toujours l'enfant. Les propriétés de la grille ne fonctionnent que dans le cadre de cette relation.

Les descendants d'un conteneur de grille au-delà des enfants ne font pas partie de la disposition de la grille et n'accepteront pas les propriétés de la grille. (Du moins, pas avant que l'élément subgrid a été implémentée, ce qui permettra aux descendants des éléments de la grille de respecter les lignes du conteneur primaire).

Voici un exemple des concepts de structure et de portée décrits ci-dessus.

Imaginez une grille en forme de morpion.

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

Vous voulez que les X et les O soient centrés dans chaque cellule.

Vous appliquez donc le centrage au niveau du conteneur :

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

Mais en raison de la structure et de la portée de la mise en grille, justify-items sur le conteneur centre les éléments de la grille, pas le contenu (du moins pas directement).

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>

Même problème avec align-items : Le contenu peut être centré comme un sous-produit, mais vous avez perdu la conception de la mise en page.

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>

Pour centrer le contenu, vous devez adopter une approche différente. En vous référant à nouveau à la structure et à la portée de la mise en page de la grille, vous devez traiter l'élément de la grille comme le parent et le contenu comme l'enfant.

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>

Démonstration de jsFiddle

---

Six méthodes de centrage dans la grille CSS

Il existe plusieurs méthodes pour centrer les éléments de la grille et leur contenu.

Voici une grille de base de 2x2 :

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

Pour un moyen simple et facile de centrer le contenu des éléments de la grille, utilisez la fonction flexbox.

Plus précisément, faites de l'élément de la grille un conteneur flexible.

Il n'y a aucun conflit, aucune violation des spécifications ou autre problème avec cette méthode. Elle est propre et valide.

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>

Voir ce billet pour une explication complète :

• Comment centrer les éléments verticalement et horizontalement dans Flexbox ?

---

Disposition de la grille

De la même manière qu'un élément flex peut être un conteneur flex, un élément de grille peut être un conteneur de grille. Cette solution est similaire à la solution flexbox ci-dessus, sauf que le centrage est effectué avec les propriétés de la grille, et non celles du flex.

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 marges

Utilisez margin: auto pour centrer verticalement et horizontalement les éléments de la grille.

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>

Pour centrer le contenu des éléments de la grille, vous devez placer l'élément dans un conteneur de grille (ou flex), envelopper les éléments anonymes dans leurs propres éléments ( puisqu'ils ne peuvent pas être directement ciblés par les CSS ), et appliquer les marges aux nouveaux éléments.

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>

---

Propriétés d'alignement des boîtes

Lorsque vous envisagez d'utiliser les propriétés suivantes pour aligner les éléments de la grille, lisez la section sur les auto marges ci-dessus.

• align-items
• justify-items
• align-self
• justify-self

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

---

text-align: center

Pour centrer horizontalement le contenu d'un élément de la grille, vous pouvez utiliser l'attribut text-align propriété.

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>

Notez que pour le centrage vertical, vertical-align: middle ne fonctionnera pas.

Cela s'explique par le fait que le vertical-align s'applique uniquement aux conteneurs inline et table-cell.

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>

On pourrait dire que display: inline-grid établit un conteneur de niveau inline, et ce serait vrai. Alors pourquoi vertical-align fonctionnent dans les éléments de la grille ?

La raison en est que dans un contexte de mise en forme de la grille les éléments sont traités comme des éléments de niveau bloc.

6.1. Élément de la grille Afficher

El display la valeur d'un élément de la grille est bloqué si le spécifié display d'un enfant en flux d'un élément générant une est une valeur de niveau ligne, elle est calculée à sa valeur de niveau équivalent au niveau du bloc.

Dans un contexte de mise en forme des blocs quelque chose que le vertical-align a été conçue à l'origine, le navigateur ne s'attend pas à trouver un élément de niveau bloc dans un conteneur de niveau ligne. C'est du HTML non valide.

---

Positionnement CSS

Enfin, il existe une solution générale de centrage CSS qui fonctionne également dans Grid : positionnement absolu

C'est une bonne méthode pour centrer les objets qui doivent être retirés du flux de documents. Par exemple, si vous voulez :

• Centrer le texte sur une image ou
• Placez des astérisques (*) au-dessus des champs obligatoires du formulaire.

Tout simplement position: absolute sur l'élément à centrer, et position: relative sur l'ancêtre qui servira de bloc contenant (il s'agit généralement du parent). Quelque chose comme ceci :

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>

Voici une explication complète du fonctionnement de cette méthode :

• L'élément ne reste pas centré, notamment lors du redimensionnement de l'écran.

Voici la section sur le positionnement absolu dans la spécification de la grille :

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

Answer 2

N'essayez même pas d'utiliser Flex et restez avec la grille css. Ajoutez simplement ce qui suit sur l'élément de contenu :

place-self: center;

et il fera le travail de centrage ici.

Si vous voulez centrer quelque chose qui est à l'intérieur div qui se trouve à l'intérieur d'une cellule de la grille, vous devez définir une grille imbriquée pour que cela fonctionne. Les deux exemples montrés dans le Démonstration .

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

Answer 3

Le CSS articles de placement Cette propriété abrégée définit les propriétés align-items et justify-items, respectivement. Si la deuxième valeur n'est pas définie, la première valeur est également utilisée pour elle.

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

Answer 4

Vous pouvez utiliser la fonction Flexbox pour centrer votre texte. D'ailleurs, il n'est pas nécessaire d'utiliser des conteneurs supplémentaires, car le texte est considéré comme un élément flex anonyme.

Desde Spécifications flexbox :

Chaque enfant du flux entrant d'un conteneur souple devient un élément flexible et chaque partie contiguë du texte qui est directement contenue à l'intérieur d'un conteneur souple est enveloppée dans un élément flexible . Cependant, un élément flex anonyme qui ne contient que espace blanc (c'est-à-dire les caractères qui peuvent être affectés par l'option white-space ) n'est pas rendu (tout comme s'il était display:none ).

Il suffit donc de faire des éléments de la grille des conteneurs flexibles ( display: flex ), et ajouter align-items: center y justify-content: center pour se centrer à la fois verticalement et horizontalement.

Il a également procédé à l'optimisation du HTML et du 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>

Answer 5

Nous pouvons utiliser place-items: center; dans l'élément parent pour que le texte des éléments enfants soit centré.

.parent {
    display:grid;
    grid-template-columns: repeat(2,1fr);
    border: 3px solid yellow;
    grid-gap: 3px;
    place-items: center;
 }

 .parent > div {
    background-color: blue;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 2rem;
 }

<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>