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>

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

Réponses:

433

Cette réponse comporte deux sections principales:

  1. Comprendre le fonctionnement de l'alignement dans CSS Grid.
  2. 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;
}

entrez la description de l'image ici

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

entrez la description de l'image ici

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

entrez la description de l'image ici

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

entrez la description de l'image ici

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>

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

Voir cet article pour une explication complète:


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.


auto marges

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

grid-item {
  margin: auto;
}

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


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

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.

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

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

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

Michael Benjamin
la 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
1
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
5
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
11

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>

Vadim Ovchinnikov
la source
9

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
la 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
2
Cela peut être raccourci par place-self: center;.
DevonDahon
6

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
la source
place-itemsn'est actuellement pas pris en charge dans Edge
Konrad Albrecht le
1

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

Renato Siqueira
la source
1
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
-2

Je sais que cette question remonte à quelques années, mais je suis surpris de constater que personne n'a suggéré:

   text-align: center;

c'est une propriété plus universelle que justify-content, et n'est certainement pas unique à la grille, mais je trouve que lorsqu'il s'agit de texte, ce que cette question pose spécifiquement, cela aligne le texte au centre sans affecter l'espace entre les éléments de la grille ou le centrage vertical. Il centre le texte horizontalement là où il se trouve sur son axe vertical. Je trouve également que cela supprime une couche de complexité qui ajoute justify-content et align-items. justify-content et align-items affectent tout le ou les éléments de la grille, text-align centre le texte sans affecter le conteneur dans lequel il se trouve. J'espère que cela vous aidera.

Aft3rL1f3
la source