How to center align items with column count?

Question

I have an unordered list that gets dynamically filled with list-items from 1 up to anything. This list is styled as columns using column count. If there are more 3 ore more items in the list, everything is fine. But when there are two or only one item I want to position them in the middle.

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;
}

Demo: http://codepen.io/anon/pen/NPBKBd

Here is an image:

enter image description here

Why not just center the list under the "icon"? A demo is much better than an image. — Paulie_D, Mar 02 '15 at 13:09
Have you considered having the script that adds the dynamic items also change the class when it's less than 3 columns, rather than doing it via the CSS? — David Navarre, Mar 02 '15 at 13:10

score 4 · Answer 1 · answered Mar 02 '15 at 13:11

4

I would wrap it in a wrapper and apply margin auto to left/right or check out this plugin

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

answered Mar 02 '15 at 13:11

Did this answer help? Please make sure to accept answer. – Aug 12 '15 at 15:30

How to center align items with column count?

1 Answers1