边距自动不是由宽度决定的答案

【问题标题】：margin auto not determined by width边距自动不是由宽度决定的
【发布时间】：2013-12-11 01:08:29
【问题描述】：

在我的 rails 应用程序中，我有一个容器，其中包含 1 到 4 个包含产品图像/文本的 div。如果有人在上一页中只选择了 1 个产品，则有 1 个 div，如果有人选择了 2 个产品，则有 2 个 div，如果有人选择了 3 个产品，则有 3 个 div，依此类推。所以产品 div 的数量会根据情况而变化和变化。

我想要的：容器及其 div 居中。

如果有一个 div，我希望它居中/边距：自动，如果有两个 div 我希望它们浮动/内联块和边距居中，我希望所有 div 都浮动并居中，但直到所有 div 填满容器的宽度。

我尝试margin:auto 容器，但我需要设置宽度。如果我有一个固定的宽度，那么它不会根据容器中有多少个 div 而增长。

image1 http://www.image-maps.com/uploaded_files/3201312101150184_div1.png

image2 http://www.image-maps.com/uploaded_files/3201312101150184_div2.png

image3 http://www.image-maps.com/uploaded_files/3201312101150184_div3.png

div 内部容器的宽度不变。

我的问题与浏览器的宽度无关。

【问题讨论】：

容器的宽度是否始终相同？

标签： html css

【解决方案1】：

如果您的内部人员div 是inline-block，您可以在容器上使用text-align：

.container {
   text-align:center;
}
.container div.inside {
   display:inline-block;
}

【讨论】：

【解决方案2】：

您可以将 display 设置为 inline-block 用于 div 并将 text-align 设置为 center 用于容器。

请记住 text-align 是继承的，因此您需要在 div 上将其重新设置为所需的值。

【讨论】：

【解决方案3】：

我知道这样做的唯一方法是使用

display: inline-block;

在 div 上，它是容器。不要使用

float: left;

设置

text-align: center;

在容器上，它是父容器。

margin: auto; 只能在具有明确宽度的 div 中居中。自动增长的 div 没有明确的宽度，因此 margin: auto; 将不起作用。

空白

使用inline-block 时要小心，因为浏览器会在您的标记中看到空格并将其呈现到页面上，这可能会导致不良影响。只需确保删除divs 之间的所有空白即可。

【讨论】：