Centrage dans la grille CSS

179

J'essaye de créer une page simple avec CSS Grid.

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

J'ai essayé le contenu de mise en différents divs à la fois à l' intérieur et à l' extérieur du left_bget right_bgsélecteurs et jouer avec quelques - unes des propriétés CSS en vain.

Comment puis-je faire cela?

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>

Développer l'extrait

— betterave
source

Veuillez consulter le lien w3.org/Style/Examples/007/center.en.html , j'espère qu'il vous sera utile.

— Ali

433

Cette réponse comporte deux sections principales:

Comprendre le fonctionnement de l'alignement dans CSS Grid.
Six méthodes de centrage dans CSS Grid.

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

La structure et l'étendue de la disposition de la grille

Pour bien comprendre le fonctionnement du centrage dans un conteneur de grille, il est important de comprendre d'abord la structure et la portée de la disposition de la grille.

La structure HTML d'un conteneur de grille comporte trois niveaux:

le container
l'article
le contenu

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

La 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 un élément de grille est toujours l'enfant. Les propriétés de grille ne fonctionnent que dans cette relation.

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

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

Imaginez une grille en forme de tic-tac-toe.

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 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 disposition de la grille, justify-itemssur le conteneur centre les éléments de la grille, pas le contenu (du moins pas directement).

Afficher l'extrait de code

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>

Développer l'extrait

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

Afficher l'extrait de code

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>

Développer l'extrait

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 disposition de la grille, vous devez traiter l'élément de 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;
}

Afficher l'extrait de code

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évelopper l'extrait

Démo 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 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>

Développer l'extrait

Flexbox

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

Plus précisément, transformez l'élément de grille en un conteneur flexible.

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

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

Afficher l'extrait de code

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>

Développer l'extrait

Voir cet article pour une explication complète:

Comment centrer des éléments verticalement et horizontalement dans Flexbox

Disposition de la grille

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

Afficher l'extrait de code

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>

Développer l'extrait

`auto` marges

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

grid-item {
  margin: auto;
}

Afficher l'extrait de code

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>

Développer l'extrait

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

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

Afficher l'extrait de code

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>

Développer l'extrait

Propriétés d'alignement de boîte

Lorsque vous envisagez d'utiliser les propriétés suivantes pour aligner les éléments de la grille, lisez la section sur les automarges 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 le contenu horizontalement dans un élément de grille, vous pouvez utiliser la text-alignpropriété.

Afficher l'extrait de code

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>

Développer l'extrait

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

En effet , la vertical-alignpropriété s'applique uniquement aux conteneurs de cellules de table et inline.

Afficher l'extrait de code

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>

Développer l'extrait

On pourrait dire que cela display: inline-gridétablit un conteneur de niveau en ligne, et ce serait vrai. Alors pourquoi ne vertical-alignfonctionne pas dans les éléments de la grille?

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

6.1. Affichage des éléments de grille

La displayvaleur d'un élément de grille est bloquée : si la spécification displayd'un enfant en flux d'un élément générant un conteneur de grille est une valeur de niveau en ligne, elle calcule à son équivalent au niveau du bloc.

Dans un contexte de mise en forme de bloc , pour lequel la vertical-alignpropriété a été conçue à l'origine, le navigateur ne s'attend pas à trouver un élément de niveau bloc dans un conteneur de niveau en ligne. C'est du HTML invalide.

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 supprimés du flux de documents. Par exemple, si vous souhaitez:

Définissez simplement position: absolutesur l'élément à centrer, et position: relativesur l'ancêtre qui servira de bloc conteneur (c'est généralement le parent). Quelque chose comme ça:

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

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

Afficher l'extrait de code

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>

Développer l'extrait

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

L'élément ne restera pas centré, en particulier lors du redimensionnement de l'écran

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

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

— Michael Benjamin
source

Salut Michael, je me demandais si c'était possible simplement en utilisant la grille pour redimensionner chaque colonne à la taille de la plus petite colonne de la ligne?

— The Codesee

@TheCodesee, cela peut être possible, selon toutes vos exigences. Avez-vous un exemple de code? Ou pensez à publier une nouvelle question avec tous les détails.

— Michael Benjamin

est grid-containeret grid-itemsont des balises HTML?

— diEcho

Ce sont des balises HTML personnalisées . Vous pouvez créer vos propres balises, comme je l'ai fait pour cette démo. stackoverflow.com/q/36380449/3597276 @ pro.mean

— Michael Benjamin

C'est une merveilleuse réponse, merci. Cela m'a fait réaliser, dans vos deux premiers exemples, qu'entre flexet grid, align-itemsreste le même mais pour une raison quelconque justify-contentdevientjustify-items

— WoJ

Vous pouvez utiliser flexbox pour centrer votre texte. En passant, pas besoin de conteneurs supplémentaires car le texte est considéré comme un élément flexible anonyme.

À partir des spécifications flexbox :

Chaque enfant en flux d'un conteneur flex devient un élément flex , et chaque séquence contiguë de texte qui est directement contenue dans un conteneur flex est enveloppée dans un élément flex anonyme . Cependant, un élément flexible anonyme qui ne contient qu'un espace blanc (c'est-à-dire des caractères qui peuvent être affectés par la white-spacepropriété) n'est pas rendu (comme s'il l'était display:none).

Faites donc simplement des éléments de grille comme des conteneurs flexibles (display: flex ), et ajoutez align-items: centeretjustify-content: center pour centrer à la fois verticalement et horizontalement.

Optimisation également effectuée de HTML et 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>

Développer l'extrait

— Vadim Ovchinnikov
source

N'essayez même pas d'utiliser flex; restez avec la grille css !! :)

https://jsfiddle.net/ctt3bqr0/

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

fait le travail de centrage ici.

Si vous souhaitez centrer quelque chose qui se trouve à l' divintérieur de la cellule de la grille, vous devez définir une grille imbriquée pour que cela fonctionne. (Veuillez regarder les deux exemples de violon montrés ici.)

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

À votre santé!

— Konrad Albrecht
source

Je me posais des questions sur les grilles imbriquées. Merci de m'avoir montré comment c'est fait je suppose. Vous pensez donc que le flex devrait être évité avec la grille ou est-ce bien de le combiner?

— betterave

C'est bien de combiner, mais vous devez être sûr que vous utilisez le bon outil pour le travail. Trouvez du temps et regardez la présentation de Rachels, qui clarifiera beaucoup pour vous dans le sujet de la grille css. youtu.be/3vJE3bVoF-Q

— Konrad Albrecht

Le problème avec cette approche se produit lorsque vous utilisez des bordures sur les éléments de la grille ...

— Andrew

Cela peut être raccourci par place-self: center;.

— DevonDahon

La propriété abrégée CSS place-items définit respectivement les propriétés align-items et justify-items. 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;
}

— CloudBranch
source

place-itemsn'est actuellement pas pris en charge dans Edge

— Konrad Albrecht le

Essayez d'utiliser flex:

Démo de Plunker: 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
source

-2

Tu veux ça?

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>

Développer l'extrait

— Renato Siqueira
source

Pas assez. Le texte doit également être aligné verticalement.

— betterave

Utilisation

.text{ font-family: Raleway; font-size: large; text-align: center;  -webkit-transform: rotate(-90deg);  -moz-transform: rotate(-90deg);	  }

— Renato siqueira

Centrage dans la grille CSS

La structure et l'étendue de la disposition de la grille

Six méthodes de centrage dans la grille CSS

Flexbox

Disposition de la grille

auto marges

Propriétés d'alignement de boîte

text-align: center

Positionnement CSS

`auto` marges

`text-align: center`