フレックスボックスを使用して垂直にセンタリングしながら、2つのdivをインラインで表示するにはどうすればよいですか？

Question

私は別のdivコンテナの中に2つのdivを持っています。私はフレックスボックスを使用してコンテナの内部を垂直にセンタリングしていますが、それらを横に並べるのではなく横に並べるようにします。コンテナのdisplayプロパティをflexからinline-flexに変更すること、および子divにdisplay:inline-blockを追加することを含む、いくつかの異なるアプローチを試しました。ここに私が働いているものの写真があります。ご覧のように、2つのdiv（画像とグループ1のラベル）は親divの中央に表示されますが、グループ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はdisplay: inline-flexを使用して、フレックスプロパティ
• 避けないで、あなたの状況は
• フロートとフレックスは、レイアウト方法が競合していることのために呼び出すことはありません。ピック・ワン - この場合、フレックスのために解決します。他に
• rowあるデフォルトフレックス方向、使用してください（rowに宣言されていない場合は、デフォルト値を、私たちはちょうどそのプロパティを削除することができます）

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

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

---

複数の画像とテキストのペアがある場合は、入れ子にする必要があります。各ペアは、追加<div>によってラップする必要があります：

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

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