我想创建3列,但如果列数不是3的倍数,我希望溢出/提醒列居中,而不是左对齐。
我有点让它与其余的2列分开工作,浮动在前3列下面,相对于
div.hold
而不是上面的行。
例如,如果它是固定的5列;
.col-md-4
.col-md-4
.col-md-4
.col-md-4 .offset-md-2
.col-md-4 .offset-md-2
这是我到目前为止的情况。
https://jsfiddle.net/m16yctyd/5/
.hold {
width: 800px;
margin: 0px auto;
background: #ccc;
}
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
list-style: none;
}
li {
width: 33.333%;
text-align: center;
display: inline-block;
vertical-align: middle;
margin: 30px auto;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: yellow;
}
li:nth-child(3) {
background: green;
}
li:nth-child(4) {
background: blue;
}
li:nth-child(5) {
background: orange;
}
<div class="hold">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
