Question

我有一个.container和3个元素。容器是全宽的，其子项与左侧对齐。我想把一切都集中在一起。

这是一个布局

.container
  .element1
  .element2
  .element3

这就是我想要的

.container { 
  .invisible-wrapper-with-css { 
    .element[1-3] {
    } 
  } 
}

我不想添加任何HTML。

有没有办法将.element[1-3]视为一个项目，或者有办法 - 仅使用CSS - 将它们包裹起来，以便我可以给.element[1-3]个孩子的包装器{{1 }

提前谢谢。

Answer 1

如果要选择所有元素，只需选择容器中div子项的每个实例。

.container {
  div {
  }
}

我建议只使用flexbox显示器：

.container {
  display: flex;
  justify-content: space-around;
}

会给你一个类似于表格单元格的间距

.container {
      display: flex;
      justify-content: center;
    }

基本上将所有元素浮动到中心

Answer 2

您可以在子元素上使用display:inline-block，在容器上使用text-align:center。

＆＃13;

.container {
  text-align: center;
  background: pink;
}
.container div {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid grey;
  background: green;
}

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

总的来说，我更喜欢flexbox。

仅使用CSS包装容器中的元素

2 个答案: