After Float Images, Need To Be Centered In Div

I've tried many times and it couldn't work at all. I need the float images in the centered inside the div. So I don't need to do padding and margin. It will be automatically nice w

Solution 1:

You don't have to float the list items left if you have used display: inline-block and text-align: center.

If I am correct, this is what you want, right?

http://jsfiddle.net/d2rhR/2/

Just removed the float on

.image-global li {

    display:inline-block;
}

Solution 2:

Take away float:left; in .image-global li and it will be done.

So it will be this:

.image-global li {
    display:inline-block;
}

The display:inline-block; will still give the desired outcome and will also center like you want.

JSFiddle

Solution 3:

You should use only display: inline-block; and remove float: left; on your .image-global li class.

I have also added negative margin to close the gaps.

.image-global li {
    display: inline-block;
    margin-right: -4px;
}

Demo