我想要一个巨大的进度条，它在 CSS 网格内垂直对齐。
问题是，CSS 网格内的垂直对齐对我不起作用。我尝试过 Firefox，也尝试过 Chrome。
I tried 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>
A demo:
https://codepen.io/anon/pen/OOpdPW https://codepen.io/anon/pen/OOpdPW
如何垂直对齐上述演示项目的进度条（在其网格项内）？
您是否总是忘记如何使用 CSS Grid 垂直对齐 div 中的元素？不要感到孤独，因为我也是如此，而且我总是会来到这里。本质上，这两个属性可以应用于包含需要垂直居中的元素的 div：
.some-class {
display: grid;
align-items: center;
}
这里有一个JSFiddle https://jsfiddle.net/mkzhkeeh/1/任何对这些属性如何工作感兴趣的人的示例。
资源
- 网格模板 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
- 证明项目的合理性 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
- 对齐项目 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
