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

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 {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; flex-wrap: wrap;&nbsp; justify-content: center;}.item {&nbsp; display: flex;&nbsp; width: 20%;&nbsp; height: 100px;&nbsp; border: 1px Solid;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; margin: 5px;}<div class="row">&nbsp; <div class="item">&nbsp; &nbsp; &nbsp; 1&nbsp; </div>&nbsp; <div class="item">&nbsp; &nbsp; &nbsp; 2&nbsp; </div>&nbsp; <div class="item">&nbsp; &nbsp; &nbsp; 3&nbsp; </div>&nbsp; <div class="item">&nbsp; &nbsp; &nbsp; 4&nbsp; </div>&nbsp; <div class="item">&nbsp; &nbsp; &nbsp; 5&nbsp; </div></div>jsfiddle