CSS网格内的垂直对齐

Question

我想要一个在 CSS 网格内垂直对齐的巨大进度条。

问题是，CSS 网格内的垂直对齐对我不起作用。我在 Firefox 上试过，也在 Chrome 上试过。

我试过 vertical-align: middle ，但它不起作用。我在网格项目中放置了一个 Flexbox，但它仍然无法正常工作。

这是我的最小示例：

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

演示： https ://codepen.io/anon/pen/OOpdPW

如何垂直对齐上述演示项目的进度条（在其网格项内）？

原文由 arcol 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 Flexbox 解决方案，您必须将 display:flex 和 align-items: center 添加到 .two ，因此 CSS 变成这样：

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

然后将 flex: 1 添加到 .vertical ：

 .vertical {
    flex: 1
}

这是完整的代码：

 .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; not needed */
  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>

原文由 Temani Afif 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您是否总是忘记如何使用 CSS Grid 垂直对齐 div 中的元素？不要感到孤单，因为我也是，而且我总是在这里。本质上，这两个属性可以应用于包含需要垂直居中元素的 div：

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

这是一个 JSFiddle 示例，供任何对这些属性如何工作感到好奇的人使用。

资源

• 网格模板
• 证明项目
• 对齐项目

原文由 Doug Wilhelm 发布，翻译遵循 CC BY-SA 3.0 许可协议