web-dev-qa-db-fra.com

Centrage dans la grille CSS

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

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

J'ai essayé de placer le contenu dans divs séparé à la fois à l'intérieur et à l'extérieur des sélecteurs left_bg et right_bg et à jouer avec certaines 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>
htmlcsscss3centeringcss-grid
97
beetroot

Vous pouvez utiliser flexbox pour centrer votre texte. Soit dit en passant, aucun conteneur supplémentaire n'est nécessaire car le texte est considéré comme un élément Flex anonyme.

De spécifications flexbox :

Chaque enfant entrant d'un conteneur flexible devient un élément flexible , et chaque série de texte contigu qui est directement contenu dans un conteneur flexible est enveloppé dans un anonyme élément flexible . Toutefois, un élément flex anonyme qui contient uniquement espace blanc (les caractères susceptibles d'être affectés par la propriété white-space ) n'est pas restitué (comme s'il s'agissait d'une propriété). _display:none_).

Il suffit donc de créer des éléments de grille comme des conteneurs flexibles (_display: flex_) et d’ajouter _align-items: center_ et _justify-content: center_ pour centrer à la fois verticalement et horizontalement.

Également effectué l'optimisation 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>_
8
Vadim Ovchinnikov

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

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'intérieur de div qui se trouve à l'intérieur d'une cellule de grille, vous devez définir une grille imbriquée afin de la faire fonctionner. (S'il vous plaît regardez le violon deux exemples montrés ici.)

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

À votre santé!

1
Konrad Albrecht

Essayez d'utiliser flex:

Démo 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>
0
Younis Ar M