html - 垂直对齐包含在另一个 中的 的内容

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

只需将 flex 元素放入(嵌套的) flex 容器中，并应用 flex 对齐属性。

将此添加到您的代码中:

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

revised demo

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