css - 如何将元素与列数居中对齐？

Question

我有一个无序列表，它会动态填充从 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

这是一张图片:

Answer 1

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

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