中心 CSS 第 2 行 lis 使用 display:table 在 div 下均匀分布

Question

我想在列表下均匀地展开我的 li，所以我使用了 display:table 技巧，但这只有在你只有一排展开的项目时才有用出去。从下图中可以看出，如果你有 2 行，第 2 行的项目将保持与第一行相同的宽度，这很好，但它不再居中。我如何让它居中？ lis 的数量会动态变化，因此理想情况下，如果超过 3 个 li，它会创建一个新行，并在必要时将第 2 行的 li(s) 居中。

HTML

<ul class="table">
  <div class="table-row">
    <li class="cell type type-water">water</li>
    <li class="cell type type-ghost">ghost</li>
    <li class="cell type type-ground">ground</li>
  </div>
  <div class="table-row">
    <li class="cell type type-ice">ice</li>
  </div>
</ul>

CSS

.table {
  display: table;
  width: 100%;
  list-style: none;
    table-layout: fixed;
}

.table-row {
  display: table-row;
  width: 100%;
  list-style: none;
    table-layout: fixed;
}

.cell {
  display: table-cell;
  text-align: center;
}

Answer 1

一般情况下，您无法正确居中。 table 以表格方式显示。它有列和行，它们必须保持对齐。

例如，如果您的第一行有三个单元格，第二行有两个单元格，您可以将最后两个单元格向左或向右对齐，但不能居中。

因此，我建议让细胞生长而不是居中

.table-row {
  display: table;
  width: 100%;
  list-style: none;
  table-layout: fixed;
}
.cell {
  display: table-cell;
  text-align: center;
}
.table, .cell {
  border: 1px solid;
}

<div class="table">
  <div class="table-row">
    <div class="cell type type-water">water</div>
    <div class="cell type type-ghost">ghost</div>
    <div class="cell type type-ground">ground</div>
  </div>
  <div class="table-row">
    <div class="cell type type-ice">ice</div>
  </div>
</div>

您可以这样做，因为现在每一行的单元格宽度都是独立的，我们实际上可以将每一行包装在不同的 table.

或者，您可以手动插入元素或伪元素以将单元格放置在所需位置：

.table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.table-row {
  display: table-row;
}
.cell {
  display: table-cell;
  text-align: center;
  border: 2px solid;
}
.insert-before::before, .insert-after::after {
  content: '';
  display: table-cell;
}

<div class="table">
  <div class="table-row">
    <div class="cell type type-water">water</div>
    <div class="cell type type-ghost">ghost</div>
    <div class="cell type type-ground">ground</div>
  </div>
  <div class="table-row insert-before insert-after">
    <div class="cell type type-ice">ice</div>
  </div>
</div>

但如果不同行的单元格数具有不同的奇偶性，则无法实现居中。

中心 CSS 第 2 行 lis 使用 display:table 在 div 下均匀分布

Center CSS 2nd row of lis that is spread evenly under a div using display:table

html

css

center

alignment