CSS 将浮动列表项 <li> 置于 div 或其 <ul> 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6235938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering floating list items <li> inside a div or their <ul>
提问by Sam
HTML:
HTML：
<div class="imgcontainer">
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
.....
</ul>
</div>
I'm coding a simple gallery page by creating unordered list and each list item of it contains an image.
我正在通过创建无序列表来编写一个简单的图库页面，并且其中的每个列表项都包含一个图像。
ul li {
float: left;
}
I set the width of the container as "max-width" so I can make possible to fit the list items (images) to the browser width.. meaning that they will be re-arranged when the browser window re-sized.
我将容器的宽度设置为“max-width”，这样我就可以使列表项（图像）适合浏览器宽度。这意味着它们将在浏览器窗口重新调整大小时重新排列。
.imgcontainer{
max-width: 750px;
}
Now the problem is those images or list items are not aligned to center, they are aligned to the left of .imgcontainer body (colored gray in the attached link below), leaving a space on the right when the window re-sized!
现在的问题是那些图像或列表项没有与中心对齐，它们与 .imgcontainer 主体的左侧对齐（在下面的附加链接中为灰色），当窗口重新调整大小时，在右侧留下一个空间！
How can I center those images every time the window resized?
每次调整窗口大小时，如何将这些图像居中？
Here's the whole page/code you can preview it or edit it at JS Bin
这是整个页面/代码，您可以在 JS Bin 中预览或编辑它
回答by Midas
Remove float:leftand use display:inlineso that you can use text-align:center. Set the font size to zero so that you don't have white-space between the images.
删除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
}
The zoomis a hack for old IE versions. This is however not a valid CSS property, so won't go through the W3C validator.
这zoom是对旧 IE 版本的一种黑客攻击。然而，这不是有效的 CSS 属性，因此不会通过 W3C 验证器。
回答by Ben Zalasky
This assumes that all items are the same width. If you don't want the last row of items to be centered, you can accomplish this with a few lines of JavaScript. Ditch the inline-block, text-align center stuff, and just float your list elements and put margin: 0 autoon the list container.
这假设所有项目的宽度相同。如果您不希望最后一行项目居中，您可以使用几行 JavaScript 来完成此操作。抛弃内联块，文本对齐中心的东西，只需浮动您的列表元素并放在margin: 0 auto列表容器上。
On the JS side of things, calculate the width of your content pane or window, next determine how many items you can fit in a row, i.e. the list container element's width, and then set that width. itemWidthhere assumes each list item's width + margin + padding + border.
在 JS 方面，计算内容窗格或窗口的宽度，接下来确定一行中可以容纳多少项，即列表容器元素的宽度，然后设置该宽度。itemWidth这里假设每个列表项的宽度 + 边距 + 填充 + 边框。
var centerListItems = function (itemWidth) {
var $paneWidth = $('#my-content').width(),
setWidth;
setWidth = parseInt(($paneWidth / itemWidth), 10) * itemWidth;
$('#my-list').width(setWidth);
}
If you want it to change when the window is resized or orientation is changed, you can use underscore.js to debounce the call.
如果您希望它在调整窗口大小或更改方向时发生变化，您可以使用 underscore.js 来消除调用的抖动。
var event;
if ('onorientationchange' in window) {
event = 'onorientationchange';
} else {
event = 'resize';
}
$(window)
.off(event)
.on(event, _.debounce(function () {
centerListItems(itemWidth);
}, 350));
