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

Question

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

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

JFiddle Link

.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

更多详情：https://stackoverflow.com/a/33049198/3597276