在 div 或其 <ul> 中居中浮动列表项 <li>答案

【问题标题】：Centering floating list items <li> inside a div or their <ul>在 div 或其 <ul> 中居中浮动列表项 <li>
【发布时间】：2013-08-03 01:24:33
【问题描述】：

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

【问题讨论】：

从 li 中删除 float:left; 并添加 display:inline-block;
@rubish display:inline-block;绝对似乎是一个比'display：inline;'更强大的解决方案如下面接受的答案中所示。 +1

标签： css gallery css-float center listitem

【解决方案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 版本的 hack。然而，这不是一个有效的 CSS 属性，因此不会通过 W3C 验证器。

【讨论】：

@Midas 很好，谢谢！但是是否可以将最后一行项目向左对齐 link ，你知道， text-align:left 会让我遇到老问题。
IE 仅支持 inline-block on inline-elements。您可以通过将zoom:1; *display:inline; 添加到ul li 来解决此问题。
@Midas hummm.. 还是一样，最后一行项目仍然居中对齐，你可以查看这个页面（编辑后）看看我在说什么link。中间有 3 张图像，尝试调整窗口大小，您会注意到中间有一张图像。如何在左侧最后一行（调整大小之前和之后）制作这些图像，同时在中间仍然有图像容器。
@Sam：我不知道......我的想法是，如果你在容器上设置 text-align:center 并在 ul 上设置 text-align:left 它会做你想要的，但是有ul 的宽度是容器的 100% 的问题，因为它是 display:block。如果您将其设置为display:inline-block 或display:inline，它将不允许图像彼此相邻，它们将是每行一个。但是，您可以通过为 ul 提供固定宽度来解决此问题，但这不是您想要的。
@Marwelln：不错，但这不是 W3C 有效的。顺便说一句，zoom:1; display:inline（不带星号）工作得很好。

【解决方案2】：

这假定所有项目的宽度相同。如果您不希望最后一行项目居中，您可以使用几行 JavaScript 来完成此操作。抛弃 inline-block、text-align center 的东西，只浮动你的列表元素并将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));

【讨论】：