web-dev-qa-db-fra.com

Comment aligner verticalement des objets en CSS lorsque vous travaillez avec des grilles CSS?

J'ai rencontré ce problème récemment. Supposons que j'ai un simple <h1> tag et je veux le centrer verticalement, donc même quand je redimensionne la fenêtre, elle restera au milieu d'une de mes lignes de boîte de grille, négligeant sa position horizontale.

Je sais qu'en ce qui concerne les conteneurs de grille, vertical-align n'a aucun effet. Quelle serait donc la solution?

Cette question a été marquée comme doublon, cependant, l'autre question concerne le centrage horizontal du texte, alors que je pose ici la question du centrage vertical.

csscss3css-grid
10
user5700598

Bonne question - j'ai réussi à contourner le problème avec un wrapper et à utiliser display: table

https://jsfiddle.net/8vjvnznk/

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 300px;
  grid-template-rows: 200px 200px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
  align-content: space-evenly;
}

.workaround{
  border: 1px solid green;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: table;
  
}
h1{
  font-size: 1em;
  border: 1px solid yellow;
  display: table-cell;
  vertical-align: middle;
}

#boxc{
 background: red;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 100%;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c" id="boxc">
    <div class="workaround">
      <h1>
        The heading in question!
      </h1>
    </div>
  </div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>
3
Happysmithers

Il n'y a pas besoin de table, pourquoi mélanger la grille avec la table?

Vous pouvez utiliser align-items:center pour obtenir un centrage vertical.

Si la cellule de la grille est <h1> lui-même, vous pouvez utiliser align-self:center pour centrer verticalement le contenu dans <h1>

17
Gesha