Центрирование элементов плавающего списка

внутри div или их

HTML:

    

            

            

            .....
    
  

Я кодирую простую страницу галереи, создавая неупорядоченный список, и каждый его элемент содержит изображение.

    ul li {
        float: left;
    }

Я установил ширину контейнера как «max-width», чтобы можно было подогнать элементы списка (изображения) к ширине браузера .. это означает, что они будут переупорядочены при изменении размера окна браузера. .

    .imgcontainer{
        max-width: 750px;
    }

Теперь проблема в том, что изображения или элементы списка не выровнены по центру, они выровнены по левому краю тела .imgcontainer (окрашены в серый цвет в прикрепленной ссылке ниже), оставляя пространство справа, когда окно повторно size!

Как я могу центрировать эти изображения каждый раз при изменении размера окна?

Вот вся страница / код, который вы можете просмотреть или отредактировать в JS Bin

http://jsbin.com/etiso5