无论列表中有多少按钮都居中

Question

我使用两个 DIV 创建了一个相对简单的布局。这个想法是，所有内容都在自己的 DIV 中居中，但如果没有足够的内容来填充一行，那么下面的内容也会居中。.row {    display: table;    width: 95%;    text-align: center;    margin-left: 2.5%;    margin-right: 2.5%;    margin-top: 2.5vh;    margin-bottom: 2.5vh;}.item {    width: 16.6%;    float: left;}@media only screen and (max-device-width: 500px) {.item {    width: 33.3%;    float: left;}}<div class="row"><div class="item">    1</div><div class="item">    2</div><div class="item">    3</div><div class="item">    4</div><div class="item">    5</div><div class="item">    6</div></div></div>这些工作正常并且都是一致的。当项目数量为奇数时，就会出现问题。例如：| 1 | 2 | 3 | | 4 | 5 | 6 |在移动设备上运行良好，但...| 1 | 2 | 3 | | 4 | 5 |   |没有。我想要这样的东西...| 1 | 2 | 3 | |  4  |  5  |这意味着无论 HTML 中添加了多少项目，当这些规则被打破时，它们都会正确分发。提前致谢 ：）希望这是有道理的。

Answer 1

在这里，您可以使用以下解决方案Flexbox

.row {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

}

.item {

  display: flex;

  width: 20%;

  height: 100px;

  border: 1px Solid;

  justify-content: center;

  align-items: center;

  margin: 5px;

}

<div class="row">

  <div class="item">

      1

  </div>

  <div class="item">

      2

  </div>

  <div class="item">

      3

  </div>

  <div class="item">

      4

  </div>

  <div class="item">

      5

  </div>

</div>

jsfiddle