在容器中均匀居中的好方法吗？
在容器中均匀居中的好方法吗？
提问于 2012-05-26 20:35:09
我正在尝试做的是在容器中居中x个数的div，并在div的14px的两边各留一个空白处。
但是，像这样的代码：
divs{
display: inline-block;
margin: 0 7px;
}将在两个外部div的外部产生7px的边距，在每个div的内侧产生均匀的边距。一般情况下，什么是对抗这一问题的良好实践？我在考虑将一个' last‘类应用到最后一个div，并将它设置为margin right: 0，而其余的类则为margin right: 14，但这看起来很混乱。
小提琴：http://jsfiddle.net/ZMqbW/3/
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-05-26 20:40:59
建议#1
是什么阻止您向容器中添加填充？
.container {
padding: 7px;
overflow: hidden;
}
.divs {
display: block;
float: left;
margin: 0 7px;
}还请注意，Internet Explorer不太喜欢内联块，所以我在容器上结合使用了float: left;和overflow: hidden;。
你可以使用，看看它是否适合你。
建议#2
另一个建议是像这样使用伪类：
.divs:first-child {
margin-left: 14px;
}
.divs:last-child {
margin-right: 14px;
}尝试使用查看它的实际效果。
Stack Overflow用户
发布于 2012-05-26 20:50:53
我不认为它是非常优雅的，但是容器上的text-align: center可以解决这个问题。
测试编辑： http://dabblet.com/gist/2793852
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10766249
复制相关文章
相似问题
腾讯云开发者
