中心 div 宽度取决于内容

Question

我正在尝试实现如下所示的目标：

我不知道会渲染多少个green个元素，因为那是由CMS决定的，作者决定放多少个组件。

要求是每行有5个盒子才换行。

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

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

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>

只需将 text-align 中心添加到 div.container

Answer 3

给容器div这个属性

text-align: center;

这是一个fiddle

Answer 4

以 margin: auto 为中心不适用于 inline-block 为 display 属性.

的元素

但是，您可以通过将父元素的 text-alignment 设置为 center 来将此类元素居中。然后，（重新）将要居中的元素的 text-alignment 设置为您在那里需要的任何 text-alignment。

演示

.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;
}

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

另见 this Fiddle!

中心 div 宽度取决于内容

Center div width depending on content

html

css

centering

演示