将div中的浮动列表项<li>居中或其<ul> </ul> </li>

Question

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体的左侧（在下面的附加链接中为灰色），当窗口重新调整大小时在右侧留下一个空格！

每次调整窗口大小时，如何将这些图像居中？

以下是您可以在JS Bin上预览或编辑的整个页面/代码

http://jsbin.com/etiso5

Answer 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验证器。

Answer 2

这假设所有项目的宽度相同。如果您不希望最后一行项目居中，则可以使用几行JavaScript完成此操作。抛弃内联块，文本对齐中心内容，只需浮动列表元素并将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));