使浮动列表项<li>在div或其<ul>内居中
使浮动列表项<li>在div或其<ul>内居中
提问于 2011-06-04 17:33:27
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 body的左侧(下面的链接为灰色)，当窗口调整大小时，在右侧留下一个空间！
如何在每次调整窗口大小时将这些图像居中？
这是整个页面/代码，您可以在JS Bin中预览或编辑
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-06-04 17:49:24
删除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验证器。
Stack Overflow用户
发布于 2013-08-02 07:19:41
这假设所有项目都具有相同的宽度。如果您不希望最后一行项目居中，可以使用几行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));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6235938
复制相关文章
相似问题
腾讯云开发者
