Question

在ul下，有5个李氏。希望所有具有相同高度且固定宽度的li（每个li的20％为100％）。我用下面的代码实现了这一点。但是我的问题是，如果我只有3个或4个li，我想以相同的高度和宽度但在中心显示li。现在，如果我有3或4，则宽度正在调整并占据整个ul容器。

即使是3 li或4 li，li的宽度也应固定，并在中心对齐。

.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%;

像这样，每个元素都有20％的容器宽度，无论它们有多少，并且始终位于容器的中心。显然，第六个会绕第二行，但仍居中。

Answer 2

您可以使用flex框实现相同目的。这是一个具有5 li的示例代码

li {
  list-style-type: none;
  border: 1px solid black;
  width: 20%;
}

ul {
  padding: 0;
  display: flex;
  justify-content: center;
}

<ul>
  <li>Li 1</li>
  <li>Li 2</li>
  <li>Li 3</li>
  <li>Li 4</li>
  <li>Li 5</li>
</ul>

这是另一个具有3 li的示例代码：

li {
  list-style-type: none;
  border: 1px solid black;
  width: 20%;
}

ul {
  padding: 0;
  display: flex;
  justify-content: center;
}

<ul>
  <li>Li 1</li>
  <li>Li 2</li>
  <li>Li 5</li>
</ul>

CSS相同，只是li的数量不同。

Answer 3

使用Flexbox：

* {
  box-sizing: border-box;
}
.box-outer {   
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-color: #333;
}
.boxes {
  flex: 0 0 20%;
  vertical-align: middle;
  border: 1px dotted red;
  padding: 4px 6px;
  margin-bottom: 0;
}
.field-number {
  color: #de008d;
  font-size: 48px;
  font-family: "hurme_geometric_sans_4regular", sans-serif;
}
.field-text {
  padding-top: 10px;
  color: #fff;
}

<div class="box-outer">
  <div class="boxes">
    <h4 class="field-number">67</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">6k</h4>
    <span class="field-text">ut aliquip</span>
  </div>
  <div class="boxes">
    <h4 class="field-number">7k</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">775m</h4>
    <span class="field-text">veniam, quis nostrud exercitation ullamco</span>
  </div>
</div>

Answer 4

尝试使用display: flex;代替table。

这样，在第一个框margin-left: auto;和最后一个框margin-right: auto;上，每个框上都有固定的width，每次都保持不变。

您还可以在盒子上玩min-width: 10%和width: min-content，以使内容具有其他大小/响应性，但不能填充内容。

您的小提琴，已更新：https://jsfiddle.net/vhkw6y7o/

 .box-outer {
    text-align: center;
    display: flex;
    flex-direction: row;
    background-color: #333;
    width: 100%;
  }
  .boxes {
    border: 1px dotted red;
    padding: 4px 6px;
    width: 10%;
    margin-bottom: 0;
  }
  .boxes:first-child {
    margin-left: auto;
  }
  .boxes:last-child {
    margin-right: auto;
  }
  .field-number {
    color: #de008d;
    font-size: 48px;
    font-family: sans-serif;
  }
  .field-text {
    padding-top: 10px;
    color: #fff;
  }

Answer 5

如果要继续使用table-layout ，则需要使容器居中放置，该行始终被完全填充。

width将直接设置到单元格（.boxes）上，以便您有1或5，这将是设置的大小，表格（.box-outer）将居中

这意味着您不能将表（.box-outer）设置为width:100%并不能从table-layout:fixed;算法中受益。如果内容比.boxes集合宽（这是表格布局行为），则单元格（width）将会增长。

您在这里得到的唯一好处是，每个盒子的高度都是相同的，大多数时候宽度都是相同的。

此外，table-cell不接受margin，您需要在显示的border-spacing父对象上设置table。

代码的一些修复，保持display: table / table-cell的规则可能是：

.box-outer {
  text-align: center;
  display: table;
  table-layout: fixed;/* useless if no width set */
  background-color: #333;
  margin: auto;/* update */
  border-spacing: 0.5vw 0;/* update */
}

.boxes {
  vertical-align: middle;
  /* removed: 
  width: 10% !important; ?? this allows 10 boxes ?
  margin-right: 1% !important; :( doesn't work on a cell .
  */
  width: 20vw;/* update  whatever value, it is equal to min-width in this table-layout */
  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>
<hr>Your 5 boxes: it breaks on small screen
<hr>
<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>

另一方面，每个人都会告诉您有关flex的信息，它可以更加灵活，也可以有所不同。

可以简化

flex以使您拥有.boxes相同的height，但也可以使内容的垂直和水平居中。（也许此时，您将在考虑删除display:table方法）

这是一个示例：

.box-outer {
  text-align: center;
  display: flex;
  background-color: #333;
  justify-content:center;
  /* flex-wrap:wrap; *//* to allow boxes to wrap to next line(s) */
}

.boxes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 0 1 16.5%;/* 5 boxes + margins tune this to your needs  */
  background: #fff;
  border-radius: 6px;
  text-align: center;
  padding: 32px 29px;
  margin: 1% 0.5%;/*tune to your needs, Note: vertical margin/padding in % is calculated from width */
}

.field-number {
  color: #de008d;
  font-size: 48px;
  font-family: sans-serif;
}

.field-text {
  padding-top: 10px;
  color: #333;
}

<p>5 boxes on small screen breaks too with flex, you may want to allow wrapping ? Less than 5 boxes is to be seen below </p>
<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>
<hr>
<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>

使用有关flex模型的完整教程或提醒：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

居中对齐li，使其高度相等且宽度固定

5 个答案: