如何将3个imgs并排居中？

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

＆＃13;

＆＃13;

.socials {
  text-align: center;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请参阅此fiddle

在<a> div .socials元素中创建inline-block，为其提供与文本属性相同的属性。然后，将text-align:center添加到父级，即.socials div。

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

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

<强>更新

正如@LGSon在评论中提到的那样，

  

内联元素不需要设置为inline-block为中心   当父母有text-align: center

时

你只需要添加下面给出的CSS，使其居中。

.socials{
        text-align:center;
}

但是，请注意，如果需要使用上述方法将任何块级元素显示为inline-block，则必须将其设置为ng-switch。

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>