我知道这不是一个不常见的问题,我已经尝试了我能找到的任何解决上一个问题的方法
我有以下引导列
<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 结果之上的如果相关
最佳答案
在你的 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 小于父级的
关于css - 为什么 margin auto 不能使包含图像链接的 div 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23674122/