将一个或多个div保持在父div的中心

Question

我想制作一个像东西一样的投资组合，但没有图像。 实际上我想要一个父div容器1,2或3 div。当三个只有一个大约30％ - 内部宽度的33％的div时，它必须看在父div的中心 即（---- div ----）。

当里面有2个div时，那两个必须看在父div的中心， 即（ - div div - ）

即使我进入第四个div，父div也将它们全部保持在中间，左右相同的边距/填充。 即（div div div）

如果我在已经存在的div下输入更多div，则新的div在这些下面会完全相同。

（---- div ----）只有一个div （ - div div - ）两个div （div div div）三个divs

I need these divs with some background and will put text in it

Answer 1

您可以使用display: inline-block css属性。 Read more关于此问题，了解如何使用它来对齐元素。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  line-height: 20px;
  font-size: 14px;
  margin: 0;
}
.parent {
  letter-spacing: -4px;
  text-align: center;
  padding: 16px 0;
  font-size: 0;
}

.child {
  display: inline-block;
  vertical-align: top;
  padding: 0 8px 16px;
  letter-spacing: 0;
  font-size: 14px;
  width: 33.33%;
}

.child-holder {
  line-height: 200px;
  background: #000;
  font-size: 25px;
  height: 200px;
  color: #fff;
}

＆＃13;

<div class="parent">
  <div class="child">
    <div class="child-holder">Child 1</div>
  </div>
  <div class="child">
    <div class="child-holder">Child 2</div>
  </div>
  <div class="child">
    <div class="child-holder">Child 3</div>
  </div>
  <div class="child">
    <div class="child-holder">Child 4</div>
  </div>
  <div class="child">
    <div class="child-holder">Child 5</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.parent {text-align：center} .child {display：inline-block; width：33％}

这将解决您的问题。

Answer 3

Flexbox可以做到这一点。

.child {
  height: 40px;
  background: red;
  width: 100px;
  margin: 0 1em;
}
.parent {
  margin: 1em;
  display: flex;
  justify-content: center;
  border: 1px solid grey;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>