title: Center li elements inside ul list
body: <p>I have an issue with centering <code>li</code> elements inside of a <code>ul</code>.
  <br>Here is the JSFiddle I made: <a href="http://jsfiddle.net/e87yhgwy/" rel="nofollow">jsfiddle</a><br><br>
  And this is my CSS (same as in the JSFiddle):</p>
  
  <pre><code>.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;
  } 
  </code></pre>
  
  <p>I need to center the floated elements, the last three items should be centered. <br>Can you please suggest a way I can do this?</p>