Центр li элементы внутри ul list

Question

У меня проблема с центрированием li элементов внутри ul.
Вот JSFiddle я сделал: jsfiddle

И это мой CSS (такой же, как и в JSFiddle):

.all-collections{ 
    text-align:center; 
} 
.all-collections ul{ 
    list-style:none; 
    margin:0 auto; 
    width:40%; 
} 
.all-collections ul li{ 
    float:left; 
    margin-left:10px; 
} 

Мне нужно центрировать плавали элементы, последние три элемента должны быть центрированы.
Можете ли вы предложить способ, которым я могу это сделать?

Answer 1

.all-collections{ 
    text-align:center; 
} 
.all-collections ul{ 
    list-style:none; 
    margin:0 auto; 
    width:40%; 
    text-align: center; 
} 
.all-collections ul li{ 
    display: inline-block; 
} 

http://jsfiddle.net/e87yhgwy/1/