如何將3個img並排居中？

Question

我正在嘗試並排放置3個社交媒體圖標。 但不知道該怎么做。

<div class="maintext flipInX animated">

   <div class="socials wow bounce animated" data-wow-delay="1s">
     <a href="www.facebook.com">  <img src="http://s33.postimg.org/yitnj0vbz/fblogo.png"/></a>
     <a href="www.github.com"> <img src="http://s33.postimg.org/r7peysh3z/github.png"/></a>
     <a href="www.linkedin.com"> <img src="http://s33.postimg.org/lq7vvi8wv/linkedin_3_32.png"/></a>
   </div>

</div>

Answer 1

使用text-align: center

 .socials { text-align: center; } 

 <div class="maintext flipInX animated"> <div class="socials wow bounce animated" data-wow-delay="1s"> <a href="www.facebook.com"> <img src="http://placehold.it/50"/></a> <a href="www.github.com"> <img src="http://placehold.it/45"/></a> <a href="www.linkedin.com"> <img src="http://placehold.it/50"/></a> </div> </div> 

Answer 2

看到這個小提琴

將<a>放在.socials div inline-block元素內，該元素賦予其與文本相同的屬性。 然后，將text-align:center添加到父級（即.socials div）。

添加以下給定的CSS以使其居中

.socials{
    text-align:center;
}
.socials a{
    display:inline-block;
}

UPDATE

@LGSon在他的評論中提到，

當父級具有text-align: center時，無需將inline元素設置為inline-block即可text-align: center

您只需添加以下給定的CSS以使其居中。

.socials{
        text-align:center;
}

但是，請記住，如果需要使用上述方法將任何塊級元素的顯示設置為inline-block則必須將其設置為inline-block 。

Answer 3

Flexbox非常適合在水平和垂直方向上居中放置內容：

 img { height:40px; width:40px; background-color:gray } .socials { display: flex; justify-content:center; } .socials img { flex: 1 auto; } 

 <div class="maintext flipInX animated"> <div class="socials wow bounce animated" data-wow-delay="1s"> <a href="www.facebook.com"> <img /></a> <a href="www.github.com"> <img /></a> <a href="www.linkedin.com"> <img /></a> </div> </div>