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

Question

我知道这不是一个不常见的问题，我已经尝试了任何解决我可以找到的以前的问题

我有以下引导列

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

部分代码构建于this wordpress theme的HTML结果之上，以防相关

Answer 1

在你的小提琴中，我想你在谈论.social-child-row？

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

即可

它包含内嵌元素的图像，像文本内容一样有效地处理，因此通过将父文本对齐到center，图像将居中。

实际上有两种主要的内容集中方式：

1。文本对齐（内联元素）

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

2。保证金对齐（块元素）

如果子级内容是阻止级别（display:block）设置为父级text:align:center;，则为子级margin:0 auto提供宽度小于父母

Answer 2

您应该在想要在中心对齐的div上指定宽度，或者您可以将显示分配为inline-block而非block-inline，以使其正常工作。将样式替换为：

.social-child-row{
    /* width: (put here for optional); */
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0 auto;
}

在顶部和底部使用0边距，因为在这种情况下，您的目标只是水平居中。 *display: inline;和zoom: 1;适用于早期版本的IE兼容性。

Answer 3

.social-child-row{
    width:100%;
    text-align: center;
}

小提琴： http://jsfiddle.net/6K5hN/