css - 为什么 margin auto 不能使包含图像链接的 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 我什至试过包装列表中的链接并在线显示。 Margin 唯一起作用的情况是我指定和精确大小，如 30px

一个JSFiddle可以找到here

一些代码是建立在 this wordpress theme 的 HTML 结果之上的如果相关

Answer 1

在你的 fiddle 中，我想你在谈论 .social-child-row？

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

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

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

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

将子元素设置为 display:inline 或 display:inline-block，然后将父容器设置为 text-align:center， children 将以 parent 为中心 - 取决于它的宽度

2。边距对齐( block 元素)

如果子内容是 block 级的(display:block)在父级设置text:align:center;，然后给子级margin:0 auto 并且 width 小于父级的