为什么margin自动无法使包含带图像链接的div居中

Question

我知道这不是一个不寻常的问题,我已经尝试了任何解决我可以找到的先前问题的方法

我有以下bootstrap列

<div class="col-sm-12">
   <div class="social-child-row">
      <a href="" ><img width="35" height="35" src="imgs/gplus2.png" alt="gplus" /></a>
      <a href="" ><img width="35" height="35" src="imgs/stackoverflow.png" alt="stackoverflow"/></a>
      <a href="" ><img width="35" height="35" src="imgs/twitter.png" alt="twitter"/></a>
      <a href="" > <img width="35" height="35" src="imgs/github.png" alt="github"/></a>
      <a href="" ><img width="35" height="35" src="imgs/email.png" alt="email"/></a>
   </div>
</div>

和造型:

.social-child-row{
    width:100%;
    margin: auto;
}

这导致以下结果

我已经尝试将宽度设置为固定宽度(200px),我尝试过display: inline,display: block-inline我甚至尝试将链接包装在列表中并显示在行中.保证金工作的唯一时间是我指定和确切的大小30px

一个JSFiddle可以在这里找到

一些代码建立在这个wordpress主题的HTML结果之上,以防它相关

Answer 1

在你的小提琴中,我想你在说什么.social-child-row？

只需将其设置为display:block;和text-align:center;

它包含内联元素的图像,像文本内容一样有效地处理,因此通过对齐父项的文本center,图像将居中.

内容实际上有两种主要方式:

1.文本对齐(内联元素)

将子元素设置为display:inline或display:inline-block,然后将父容器设置为text-align:center,子项将居中于父项 - 取决于其宽度

2.保证金对齐(块元素)

如果子内容是在父级上display:block设置的block level(),则为子级text:align:center;提供小于父级margin:0 auto的宽度