如何將div與另一個div中的圖像對齊？

Question

我有一個在外部div中居中.social divs的問題。我正在尋找答案，但我找不到工作解決方案。這裏的HTML：

<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是彼此相鄰並居中.socials股利。

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

我認爲這是你正在尋找的答案。在你的CSS做這種

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

.socials{ 
    text-align:center; 
} 

點擊here看到codepen