16

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

4

2 回答 2

21

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

于 2011-06-04T09:49:23.513 回答
0

这假设所有项目的宽度相同。如果您不希望最后一行项目居中，您可以使用几行 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));
于 2013-08-01T23:19:40.813 回答