Question

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

但是，我很难找到垂直对齐box / divs内容的方法。我想要文字＆＃34; 1＆＃34; ＆＃34; 3＆＃34; ＆＃34; 4＆＃34;在它们所包含的div的垂直中心。我怎么能这样做？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

只需将flex项目放入（嵌套的）flex容器中，然后应用flex alignment属性。

将此添加到您的代码中：

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

revised demo

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

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

1 个答案: