如何将项目与列数居中对齐？答案

【问题标题】：How to center align items with column count?如何将项目与列数居中对齐？
【发布时间】：2015-03-03 00:29:50
【问题描述】：

我有一个无序列表，可以动态填充从 1 到任何值的列表项。此列表使用列数设置为列的样式。如果列表中有 3 个或更多项目，一切都很好。但是当有两个或只有一个项目时，我想将它们放在中间。

HTML：

<ul class="list">
    <li class="list-item">Text</li>
    <li class="list-item">Text</li>
 </ul>

CSS：

.list { 
    -moz-column-count: 3;
    -moz-column-gap: 1px; }`

.list-item {
    position: relative;
    padding: 0.46667rem 1.2rem;
    overflow: hidden;
    border-bottom: 1px solid #FFF;
    background-color: #EEE;
}

演示：http://codepen.io/anon/pen/NPBKBd

这是一张图片：

【问题讨论】：

为什么不在“图标”下方将列表居中？演示比图像好得多。
您是否考虑过让添加动态项的脚本在少于 3 列时也更改类，而不是通过 CSS 来实现？
我添加了一个演示链接：codepen.io/anon/pen/NPBKBd

标签： css positioning center column-count

【解决方案1】：

我会将它包装在一个包装器中并将自动边距应用于左/右或查看this plugin

.container{
  width:500px;
  margin-left:auto;
  margin-right:auto;
}

【讨论】：

这个答案有帮助吗？请务必接受答案。