在CSS网格内垂直对齐 [英] Vertical align inside CSS grid

问题描述

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

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

我尝试过 vertical-align：middle ，但事实并非如此加工。我已经在网格项目中放置了一个Flexbox，但仍然无法正常工作。

这是我的最小示例：

< pre class = snippet-code-css lang-css prettyprint-override> .wrapper {display：grid;边框样式：实心；边框颜色：红色； grid-template-columns：repeat（2，1fr）; grid-template-rows：repeat（4，1fr）; grid-gap：10px;宽度：100vw; height：100vh;}。one {边框样式：实心;边框颜色：蓝色；网格列：1/3; grid-row：1/2;}。two {border-style：solid;边框颜色：黄色；网格列：1/3; grid-row：2/4;}。three {border-style：solid;边框颜色：紫色；网格列：1； grid-row：4/5;}。four {border-style：solid;边框颜色：浅绿色网格列：2；网格行：4/5；}进度{宽度：100％；背景颜色：＃f3f3f3;边界：0;高度：2em;}

 < div class = wrapper > < div class = one>一个< / div> < div class = two> < div class = vertical> < progress max = 100 value = 80> < div class = progress-bar> < span style = width：80％;>进度：80％< / span> < / div> < / progress> < / div> < / div> < div class = three>三个< / div> < div class = four>四< / div>< / div>  

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

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

解决方案

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

  .two {
 border-style：solid; 
 border-color：黄色； 
网格列：1/3; 
网格行：2/4; 
显示：flex; 
 align-items：center; 
} 
  

然后添加 flex：1 到 .vertical ：

  .vertical {
 flex：1 
} 
  

这是完整的代码：

  .wrapper {display：grid;边框样式：实心；边框颜色：红色； grid-template-columns：repeat（2，1fr）; grid-template-rows：repeat（4，1fr）; grid-gap：10px; / *宽度：100vw;不需要* / height：100vh;}。one {border-style：solid;边框颜色：蓝色；网格列：1/3; grid-row：1/2;}。two {border-style：solid;边框颜色：黄色；网格列：1/3;网格行：2/4;显示：flex; align-items：center;}。vertical {flex：1;}。three {border-style：solid;边框颜色：紫色；网格列：1； grid-row：4/5;}。four {border-style：solid;边框颜色：浅绿色网格列：2；网格行：4/5；}进度{宽度：100％；背景颜色：＃f3f3f3;边界：0;高度：2em;}  

 < div class = wrapper > < div class = one>一个< / div> < div class = two> < div class = vertical> < progress max = 100 value = 80> < div class = progress-bar> < span style = width：80％;>进度：80％< / span> < / div> < / progress> < / div> < / div> < div class = three>三个< / div> < div class = four>四< / div>< / div>  

I would like to have a giant progressbar which is vertically aligned inside a CSS grid.

The problem is, vertical alignment inside CSS grid is not working for me. I tried on Firefox, and also on Chrome.

I tried vertical-align: middle, but it is not working. I have put a Flexbox inside the grid item, but still it is not working.

Here is my minimal example:

.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

How do I align the progressbar vertically (inside its grid item) of the above demo project?

解决方案

For the Flexbox solution, you have to add display:flex and align-items: center to .two, so the CSS becomes like this:

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

Then add flex: 1 to .vertical:

.vertical {
    flex: 1
}

Here is the full code:

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

这篇关于在CSS网格内垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！