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

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

16 голосов
/ 04 июня 2011

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;
    }

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

    .imgcontainer{
        max-width: 750px;
    }

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

enter image description here

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

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

http://jsbin.com/etiso5

Ответы [ 2 ]

21 голосов
/ 04 июня 2011

Удалите 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.

0 голосов
/ 02 августа 2013

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

Со стороны JS вычислите ширину панели содержимого или окна, затем определите, сколько элементов вы можете разместить в строке, то есть ширину элемента контейнера списка, а затем установите эту ширину. itemWidth здесь предполагается, что ширина каждого элемента списка + поле + отступ + граница. 

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));
...