中心div宽度取决于内容

Question

我正在努力实现这样的事情：

我不知道将呈现多少个绿色元素，因为这是由CMS决定的，以及作者决定放入多少组件。

要求是在包裹之前每行有5个盒子。

问题是：当我将 red 包装器设置为margin: auto时，inline-block不起作用。

div.container {
  background: black;
  padding: 10px;
}

div.wrapper {
  margin: 0 auto;
  background: red;
  padding: 10px;
  display: inline-block;
}

div.box {
  display: inline-block;
  background: lime;
  padding: 10px;
  margin: 0 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="box">
      Content 1
    </div>
    <div class="box">
      Content 2
    </div>
  </div>
</div>

Answer 1

正如Muhammad Usman建议的那样，将text-align: center添加到.container。 text-align - 属性始终引用目标元素的内容。

div.container {
  background: black;
  padding: 10px;
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  background: red;
  padding: 10px;
  display: inline-block;
}

div.box {
  display: inline-block;
  background: lime;
  padding: 10px;
  margin: 0 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="box">
    Content 1
    </div>
    <div class="box">
    Content 2
    </div>
  </div>
</div>

Answer 2

＆＃13;

＆＃13;

div.container {
  background: black;
  padding: 10px;
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  background: red;
  padding: 10px;
  display: inline-block;
}

div.box {
  display: inline-block;
  background: lime;
  padding: 10px;
  margin: 0 10px;
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <div class="box">
      Content 1
    </div>
    <div class="box">
      Content 2
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

只需将文本对齐中心添加到div.container

即可

Answer 3

给容器div这个属性

text-align: center;

这里是fiddle

Answer 4

以margin: auto为中心不适用于inline-block为display属性的元素。

但是，您可以通过将其父元素的text-alignment设置为center来对这些元素进行居中。然后，（重新）将您想要居中的元素的text-alignment设置为您需要的text-alignment。

演示

＆＃13;

＆＃13;

.container {
    background: black;
    padding: 10px;
    text-align: center; /* Center */
}

.wrapper {
    margin: 0 auto;
    background: red;
    padding: 10px;
    display: inline-block;
    text-align: left; /* Reset alignment */
}

.box {
    display: inline-block;
    background: lime;
    padding: 10px;
    margin: 0 10px;
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <div class="box">
      Content 1
    </div>
    <div class="box">
      Content 2
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

另见this Fiddle！