表格中没有覆盖的 HTML 中心元素

Question

我正在做一个网站，它有几个信息表，我希望它们彼此相邻，但我希望它们居中，而不是

float: left;

它应该像居中文本:如果它离开文本容器，它应该换行。

我试过了

margin: auto;

但这会将元素放在彼此之下，但我希望它们彼此相邻，并进入一个新的“行”，如果它们离开 div，它们就会进入。

Answer 1

你可以使用 flexbox

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

.table {
  padding: 1em;
  border: thin solid darkgray;
  width: 20%;
}

<div class="container">
  <div class="table">Table 1</div>
  <div class="table">Table 2</div>
  <div class="table">Table 3</div>
  <div class="table">Table 4</div>
  <div class="table">Table 5</div>
  <div class="table">Table 6</div>
</div>