html - 仅使用 CSS 将元素包装在容器中

Question

我有一个 .container 和 3 个元素。容器是全宽的，它的子元素左对齐。我想把一切都居中。

这是一个布局

.container
  .element1
  .element2
  .element3

这就是我想要的

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

我不想添加任何 html。

有没有办法将 .element[1-3] 视为一个元素，或者有没有办法 - 仅使用 CSS - 环绕它们以便我可以提供 .element[1-3] child margin: auto ?

提前谢谢你。

Answer 1

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

.container {
  div {
  }
}

不过，我建议只使用 flexbox 显示器:

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

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

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

基本上会将所有元素 float 到中心