垂直对齐包含在另一个 <div> 中的 <div> 的内容

Question

我最终创建了水平排列的框，占据相等 space，并且如果一个框的内容多于其他框，则高度相同。此外，如果屏幕宽度缩小到 600 像素以下，这些框会垂直排列。这些是我不想失去的属性。

但是，我很难找到一种垂直对齐 boxes/divs 内容的方法。我希望文本“1”“3”“4”位于它们所包含的 div 的垂直中心。我该怎么做呢？

.fwrapper {
  display: flex;
  #justify-content: space-around;
  justify-content: flex-start;
  background: #eee;
}

.fbox {
  width: 100%;
  padding: 1%;
  margin: 1%;
}

@media only screen and (max-width: 600px) {
  .fwrapper {
    display: block;
  }
  .fbox {
    width: inherit;
    margin: .6em;
  }
}

.pnbox {
  background: #ccc;
  border: 1px solid black;
  box-shadow: 4px 4px 4px #999;
  border-radius: 5px;
}

<div class="fwrapper">
  <div class="fbox pnbox">1</div>
  <div class="fbox pnbox">2 this is a lot of text2 this is a lot of text 2 this is a lot of text 2 this is a lot of text 2 this is a lot of text 2 this is a lot of text 2 this is a lot of text 2 this is a lot of text t </div>
  <div class="fbox pnbox">3</div>
  <div class="fbox pnbox">4</div>
</div>

Answer 1

只需将弹性项目放入（嵌套的）弹性容器中，并应用弹性对齐属性。

将此添加到您的代码中：

.fbox {
  display: flex;
  align-items: center;     /* vertical alignment */
  justify-content: center; /* horizontal alignment */
}

revised demo

更多详情：

垂直对齐包含在另一个 <div> 中的 <div> 的内容

Vertically align the content of a <div> contained within another <div>

html

css

vertical-alignment

flexbox