如何将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