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中预览或编辑
发布于 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验证器。
发布于 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));
https://stackoverflow.com/questions/6235938
复制相似问题