HTML table 中的中心元素无叠加

Question

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

float: left;

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

我试过了

margin: auto;

但这会将元素放在彼此之下，但我希望它们彼此相邻，并进入新的 "line"，如果它们离开 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>

HTML table 中的中心元素无叠加

HTML center element in table without overlay

html

css

center