3枚の画像が中央に並んでいます

Question

3つの画像を一列に並べて中央に配置しようとしています。私はそれらをすべて連続して持っているが、私はそれらを中心に置くことができない。私のグループを真ん中に持っていくための提案はありますか？私は含まれているクラスとソーシャルクラスで0を試しました。とても近くに！

私のHTML：最初のことは、すべてのものをラップするのにdivクラスですが、HTMLに含まれるクラスをインクルードしようとすると何らかの理由でスタックオーバーフローが消えてしまいます。私が推薦する何

.contain { 
 
    max-width: 960px; 
 
    text-align: center; 
 
} 
 

 
.social { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 10px; 
 
}

<div class="contain"> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp- 
 
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" /> 
 
    </div> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" /> 
 
    </div> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp- 
 
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" /> 
 
    </div> 
 
</div>

Answer 1

要素のためのflexboxコンテナを利用することです。フレキシボックスで

、あなたが必要とするすべては水平方向と垂直方向の両方の要素を集中するために、三つの異なるスタイルである：

• display: flex;
• align-items: self;
• justify-content: center;

コンテナにheightを設定する必要があります。これにより、要素が実際に垂直のスペースを埋めることができます。

これはborderが.container要素が占める面積を披露するために追加して、次のように見ることができます。

.container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
.social { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp- 
 
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" /> 
 
    </div> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" /> 
 
    </div> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp- 
 
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" /> 
 
    </div> 
 
</div>

ホープ、このことができます！ :)

Answer 2

たぶん、あなたは、CSSファイルを編集しfloat:left;を削除することができます

.contain { 
 
    max-width:960px; 
 
    text-align:center; 
 
    } 
 

 
.social { 
 
position:relative; 
 
display: inline-block; 
 
padding: 10px; 
 
}

<div align="center"> 
 
<div align="center;" class="social"> 
 
<img src="http://theinvicto.com/wp- 
 
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" /> 
 
</div> 
 
<div align="center;" class="social"> 
 
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" 
 
alt="" width="75" height="75" /> 
 
</div> 
 
<div align="center;" class="social"> 
 
<img src="http://theinvicto.com/wp- 
 
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" /> 
 
</div> 
 
</div>

Answer 3

flexを使用して最適なソリューションですが、ここであなたが既に持っているものを使用するソリューションです。あなたの既存のコードからfloat: leftを削除することで、望ましい結果を得ることができます。（JSFiddle example）：

.contain { 
 
    max-width: 960px; 
 
    text-align: center; 
 
} 
 

 
.social { 
 
    display: inline-block; 
 
    padding: 10px; 
 
}

<div class="contain"> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp- 
 
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" /> 
 
    </div> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" /> 
 
    </div> 
 
    <div align="center;" class="social"> 
 
    <img src="http://theinvicto.com/wp- 
 
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" /> 
 
    </div> 
 
</div>

Answer 4

.content { text-align:center; } 

<div class="content"> 
<div> 
    <img src="http://theinvicto.com/wp- 
    content/uploads/2017/12/facebook.png" alt="" width="75" height="75" /> 
</div> 

<div> 
    <img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" 
    alt="" width="75" height="75" /> 
</div> 

<div> 
    <img src="http://theinvicto.com/wp- 
    content/uploads/2017/12/instagram.png" alt="" width="75" height="75" /> 
</div> 

Answer 5

あなたの現在のコードを維持、単にflex: left削除

.contain { 
    max-width: 960px; 
    text-align: center; 
} 

.social { 
    position: relative; 
    display: inline-block; 
    padding: 10px; 
} 

ごbrowser compatibility requirementsあなたは余裕があるに基づく場合flexbox froggy：

.contain { 
    display: flex; 
    justify-content: center; 
} 

.social { 
    padding: 10px; 
} 

ここでは優れたフレキシボックスのチュートリアルがあります：display: flex; (MDN)を使用することは、その最も簡単な方法は、（jsfiddle example）です。フロートはかなり奇妙で、私は個人的にフレックスがはるかに直感的であると感じます。