web-dev-qa-db-fra.com

Alignement vertical dans la grille css

Je voudrais avoir une barre de progression géante, qui est alignée verticalement à l'intérieur d'une grille CSS.

Le problème est que l'alignement vertical à l'intérieur de la grille css ne fonctionne pas pour moi. J'ai essayé sur Firefox, et aussi sur Chrome.

J'ai essayé vertical-align: middle, ne fonctionnant pas. J'ai mis une boîte souple à l'intérieur de l'élément de grille, mais ne fonctionne toujours pas.

Voici mon exemple minimal:

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}

.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.three {
  border-style: solid;
  border-color: Violet;
  grid-column: 1;
  grid-row: 4 / 5;
}

.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 2;
  grid-row: 4 / 5;
}

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  height: 2em;
}
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">
    <div class="vertical">
      <progress max="100" value="80">
            <div class="progress-bar">
              <span style="width: 80%;">Progress: 80%</span>
            </div>
          </progress>
    </div>
  </div>
  <div class="three"> Three</div>
  <div class="four">Four</div>
</div>

Une démo: https://codepen.io/anon/pen/OOpdPW

Tout le monde a une idée, comment aligner verticalement la barre de progression (à l'intérieur de son élément de grille) du projet de démonstration ci-dessus?

csscss3vertical-alignmentgrid-layout
3
arcol

Pour la solution flex, vous devez ajouter display:flex et align-items: center à .two pour que le CSS devienne comme ceci:

.two {
    border-style: solid;
    border-color: yellow;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    display: flex;
    align-items: center;
}

Ajoutez ensuite flex: 1 à .vertical :

.vertical {
    flex: 1
}

Voici le code complet:

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}

.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  display: flex;
  align-items: center;
}

.vertical {
  flex: 1;
}

.three {
  border-style: solid;
  border-color: Violet;
  grid-column: 1;
  grid-row: 4 / 5;
}

.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 2;
  grid-row: 4 / 5;
}

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  height: 2em;
}
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">
    <div class="vertical">
      <progress max="100" value="80">
        <div class="progress-bar">
          <span style="width: 80%;">Progress: 80%</span>
        </div>
      </progress>
    </div>
  </div>
  <div class="three"> Three</div>
  <div class="four">Four</div>
</div>
4
Temani Afif

Ajoutez display: grid et align-items: center au .two div, mais vous pouvez également utiliser le align-self: center sur le .vertical div si l'utilisation du align-items: center sur le parent est évitée:

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}

.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.two {
  display: grid; /* added */
  align-items: center; /* added */
  border-style: solid;
  border-color: yellow;
  grid-column: 1 / 3;
  grid-row: 2 / 4   ;
}

.three {
  border-style: solid;
  border-color: Violet;
  grid-column: 1;
  grid-row: 4 / 5;
}

.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 2;
  grid-row: 4 / 5;
}

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  height: 2em;
}

/* optional, without the usage of the align-items: center; on the .two div
.vertical {
  align-self: center;
}
*/
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">
    <div class="vertical">
      <progress max="100" value="80">
        <div class="progress-bar">
          <span style="width: 80%;">Progress: 80%</span>
        </div>
      </progress>
    </div>
  </div>
  <div class="three"> Three</div>
  <div class="four">Four</div>
</div>
1
VXp

Avez-vous toujours oublié comment aligner verticalement des éléments dans une div en utilisant CSS Grid? Ne te sens pas seul, moi aussi et je finis toujours ici. Ces deux propriétés peuvent être appliquées à la div contenant des éléments devant être centrés verticalement:

.some-class {
  display: grid;
  align-items: center;
}

Voici un exemple - JSFiddle pour les personnes curieuses du fonctionnement de ces propriétés.

Ressources

0
Doug Wilhelm

donnez à la progression un style extra. position absolute, top et transform: translate. N'oubliez pas d'ajouter position:relative au parent de progress

progress {
  width: 100%;
  background-color: #f3f3f3;
  border: 0;
  position:absolute;
  top: 50%;
  transform:translate(0, -50%);
  height: 2em;
}
0
Andre Ramadhan