如何使用flex-box显示两个div内联同时垂直居中？

Question

我在另一个div容器中有2个div。我使用flexbox将它们垂直居中放在容器内，但我希望它们在水平方向上彼此相邻，而不是在另一个上方。我尝试了一些不同的方法，包括将容器的display属性从flex更改为inline-flex，以及将display:inline-block添加到子div。这是我与之合作的图片。正如您所看到的那样，2个div（图片和组1标签）在父div中居中，但我希望Group 1位于图片旁边而不是它下面。

以下代码并链接到JSfiddle：

HTML

<div class="user-group">
<div>
 Picture 1
</div>
<div class="user-group-name"><h4>Group 1</h4></div>
</div>

JS

.user-group{
font-family: 'Purista';
border: solid 1px;
display: inline-flex;
float: left;
justify-content:center;
align-content:center;
flex-direction:column; /* column | row */
width: 50%;
height: 200px;
}
.user-group > div{
    display: inline-flex;
}

Answer 1

这取决于你是否打算在元素中有多个图片+文本对。如果您不这样做，只需使用align-items: center就可以解决您的问题。您的代码存在一些问题：

• align-content不是flex属性
• 避免使用display: inline-flex，您的情况不需要它
• Floats和flex是相互矛盾的布局方法。选择一个 - 在这种情况下，我们选择flex。
• 使用默认的弹性方向，即row（如果未声明，则默认为row，因此我们可以删除该属性）

＆＃13;

＆＃13;

.user-group {
  font-family: 'Purista';
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 200px;
}
h4 {
  margin: 0;
}

＆＃13;

<div class="user-group">
  <div>
    <img src="https://placehold.it/32x32" alt="" title="" />
  </div>
  <div class="user-group-name">
    <h4>Group 1</h4></div>
</div>

＆＃13;

＆＃13;

＆＃13;

另一方面，如果你有多个图片+文字对，你将不得不求助于嵌套。每对都必须由额外的<div>包裹：

＆＃13;

＆＃13;

.user-group {
  font-family: 'Purista';
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 200px;
}
.user-group > div {
  display: flex;
  margin-bottom: 10px;
  }
h4 {
  margin: 0;
}

＆＃13;

<div class="user-group">
  <div>
    <img src="https://placehold.it/32x32" alt="" title="" />
    <div class="user-group-name"><h4>Group 1</h4></div>
  </div>
  <div>
    <img src="https://placehold.it/32x32" alt="" title="" />
    <div class="user-group-name"><h4>Group 2</h4></div>
  </div>
  <div>
    <img src="https://placehold.it/32x32" alt="" title="" />
    <div class="user-group-name"><h4>Group 3</h4></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;