Центрирование элементов плавающего списка <li> внутри div или их <ul>

HTML:

<div class="imgcontainer">
    <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            .....
    </ul>
</div>

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

    ul li {
        float: left;
    }

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

    .imgcontainer{
        max-width: 750px;
    }

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

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

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

http://jsbin.com/etiso5

Ответ 1

Удалите float:left и используйте display:inline, чтобы вы могли использовать text-align:center. Установите размер шрифта равным нулю, чтобы у вас не было пробела между изображениями.

ul {
    font-size:0;
    text-align:center
}
ul li {
    display:inline;
    zoom:1
}
.imgcontainer {
    max-width:750px;
    margin:0 auto
}

zoom - это взлом для старых версий IE. Однако это не допустимое свойство CSS, поэтому не будет проходить проверку валидатора W3C.

Ответ 2

Это предполагает, что все элементы имеют одинаковую ширину. Если вы не хотите, чтобы последний ряд элементов был центрирован, вы можете выполнить это с помощью нескольких строк JavaScript. Погрузите встроенный блок, текстовое выравнивание материала центра и просто поместите элементы списка и поместите margin: 0 auto в контейнер списка.

На стороне JS вещей вычислите ширину области содержимого или окна, затем определите, сколько элементов вы можете поместить в строке, т.е. ширину элемента списка, а затем установите эту ширину. itemWidth здесь принимает каждую ширину элемента списка + margin + padding + border.

var centerListItems = function (itemWidth) {
  var $paneWidth = $('#my-content').width(),
      setWidth;

  setWidth = parseInt(($paneWidth / itemWidth), 10) * itemWidth;

  $('#my-list').width(setWidth);
}

Если вы хотите, чтобы он изменился при изменении размера окна или изменении ориентации, вы можете использовать underscore.js для отладки вызова.

var event;

if ('onorientationchange' in window) {
  event = 'onorientationchange';
} else {
  event = 'resize';
}

$(window)
  .off(event)
  .on(event, _.debounce(function () {
    centerListItems(itemWidth);
  }, 350));