-3

I have an issue with centering li elements inside of a ul.
Here is the JSFiddle I made: jsfiddle

And this is my CSS (same as in the 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;
}

I need to center the floated elements, the last three items should be centered.
Can you please suggest a way I can do this?

Nathangrad
  • 1,376
  • 8
  • 24
alvery
  • 1,643
  • 2
  • 13
  • 33

1 Answers1

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/

AVAVT
  • 6,930
  • 2
  • 21
  • 43