CSS：4 个容器相互内联并居中答案

【问题标题】：CSS: 4 containers inline with one another and centeredCSS：4 个容器相互内联并居中
【发布时间】：2014-03-04 22:28:15
【问题描述】：

抱歉，这可能是一个非常简单的问题，但答案非常简单。无论我做什么，我都无法让它看起来像我想要的那样。

基本上，我们将有 4 个广告，每个 140x140，均匀分布在一个 660 像素宽的容器中。但一开始，我们只会有 2 个（随着广告客户需求的增加将增加到 4 个）。所以现在，我想要 2 个 140x140 的容器以 660px 宽的 div 为中心，它们之间有一个间隙。由于容器 3 和 4 被添加到该行，因此只需在容器 1 和 2 的基础上添加一个新容器，1 和 2 就会自动向左移动。

基本上，我想要的是，如果我在容器中有一个广告，它就会居中。如果我在该区域中有两个广告，它们会居中。 3、居中。 4、居中。每个都必须在自己的容器中，因为广告脚本会根据容器 ID 插入广告。

我希望这很清楚，但如果不是，请告诉我。我可以通过简单地浮动使 4 个容器相互对齐：离开它们中的每一个，但是当行中只有两个容器时，除非我添加偏移量（然后有当我们向该行添加另一个广告时重新计算）。

【问题讨论】：

标签： css

【解决方案1】：

您可以在父类上使用text-align:center，在子类上使用display:inline-block。不管有多少，它们都会居中

Demo。尝试删除广告元素以自己查看

【讨论】：

这是我打算做的，但读到 inline-block 在 IE 中效果不佳。我是否在阅读过时的信息？
@Kevin 只有最老的IE浏览器有问题，但只要你add the IE fix它就可以完美运行，即使在IE8中也是如此

【解决方案2】：

Check out bootstrap 看看他们如何处理他们的专栏。可能需要一些挖掘才能找到实际宽度，但它们就在那里。

例如，3 列布局使每列的宽度为 33.33333%。这很粗略，但应该让你明白我在说什么：

.column {
    float: left;
    width: 33.33333%;
    box-sizing: border-box;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

列/元素越多，百分比就越高。

请谨慎使用，根据您的浏览器支持，“box-sizing”可能可用也可能不可用。在这种情况下，您可能需要发挥创造力。

【讨论】：