divを他のdivのイメージに合わせるにはどうすればいいですか？

Question

私は外部部門の.social divsのセンタリングに問題があります。私は答えを探していたが、実際の解決策を見つけることができない。

<div class="socials"> 
    <div class="social"> 
    <img src="images/fb.png"> 
    </div> 
    <div class="social"> 
    <img src="images/insta.png"> 
    </div> 
    <div class="social"> 
    <img src="images/tt.png"> 
    </div> 
    <div class="social"> 
    <img src="images/snap.png"> 
    </div> 
</div> 

とCSS：

.social { 
    width: 25px; 
    height: 25px; 
    float: left; 
    cursor: pointer; 
} 

私はdivを.socialしたいが、互いに隣接して.socials divのに集中している。ここHTMLです。

Answer 1

これは役に立ちます。

.social { 
 
    width: 25px; 
 
    height: 25px; 
 
    float: left; 
 
    cursor: pointer; 
 
    display: table-cell; 
 
} 
 

 
.socials { 
 
    display: table; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="socials"> 
 
    <div class="social"> 
 
    <img src="images/fb.png"> 
 
    </div> 
 
    <div class="social"> 
 
    <img src="images/insta.png"> 
 
    </div> 
 
    <div class="social"> 
 
    <img src="images/tt.png"> 
 
    </div> 
 
    <div class="social"> 
 
    <img src="images/snap.png"> 
 
    </div> 
 
</div>

Answer 2

私は、これはあなたが探している答えだと思います。

.social { 
    display: inline-block; 
    width: 25px; 
    height: 25px; 
    cursor: pointer; 
} 

.socials{ 
    text-align:center; 
} 

クリックhereは、このようなcodepen