-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,426
  • 10
  • 25
alvery
  • 1,863
  • 2
  • 15
  • 35

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
  • 7,058
  • 2
  • 21
  • 44