html - 等高定宽居中对齐li

Question

一个ul下有5个li。想要所有具有相同高度和固定宽度的 li(每个 li 的 20% 是 100%)。我已经用下面的代码实现了这一点。但我的问题是，如果我只有 3 或 4 个李，我想显示高度和宽度相同但位于中心的李。现在如果我有 3 或 4，宽度正在调整并占据整个 ul 容器。

即使是 3 里或 4 里，里也应该有固定的宽度并居中对齐。

.box-outer {
  text-align: center;
  display: table;
  table-layout: fixed;
  background-color: #333;
}

.boxes {
  vertical-align: middle;
  width: 10% !important;
  margin-right: 1% !important;
  background: #fff;
  border-radius: 6px;
  text-align: center;
  padding: 32px 29px;
  display: table-cell;
}

.field-number {
  color: #de008d;
  font-size: 48px;
  font-family: sans-serif;
}

.field-text {
  padding-top: 10px;
  color: #333;
}

<div class="box-outer">
  <div class="boxes">
    <h4 class="field-number">83</h4>
    <span class="field-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span>
  </div>
  <div class="boxes">
    <h4 class="field-number">7,800</h4><span class="field-text">mod tempor incididunt ut labor</span>
  </div>
  <div class="boxes">
    <h4 class="field-number">65k</h4><span class="field-text">ut aliquip</span>
  </div>
  <div class="boxes">
    <h4 class="field-number">37k</h4><span class="field-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  </div>
  <div class="boxes">
    <h4 class="field-number">&#163;250m</h4><span class="field-text">veniam, quis nostrud exercitation ullamco</span>
  </div>
</div>

JS Fiddle Link

Answer 1

你可以使用flexbox。
只需创建一个容器

display: flex;
justify-content: center;
align-items: stretch;

并设置你的内盒

flex: 0 0 20%;
display: flex;
align-items: center

像这样，每个元素都有容器的 20% 宽度，无论它们有多少，并且总是在容器中居中。显然，第六行会换行但仍居中。