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

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

这里是一个形象：

enter image description here

来源

2015-03-02 Wubbel

为什么不只是居中下的“图标”列表中？演示比图像好得多。 – 2015-03-02 13:09:54

您是否认为添加动态项目的脚本在小于3列时也会更改类，而不是通过CSS来完成？ – 2015-03-02 13:10:17

我添加了演示的链接：http://codepen.io/anon/pen/NPBKBd – Wubbel 2015-03-02 16:30:28

我将它包装在一个包装并申请保证金自动向左/右或退房this plugin

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

来源

2015-03-02 13:11:14 Mintberry

这个答案有帮助吗？请确保接受答案。 – Mintberry 2015-08-12 15:30:14

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

回答

相关问题