Question

即使图像比div宽，有没有办法在div的中心水平显示一组图像？例如，如果外div宽100px且图像宽200px，那么我希望图像中心（即100px）与包含div的中心对齐（即50px）

当所有图像都小于div时，它工作正常，但是当它们更宽时，它们会左对齐。如果它们的宽度都相同，那么我可以设置div的滚动位置，但它们是动态图像，可以是任何宽度。请查看fiddle以获取示例。

这里的目的是生成类似于文档查看器的内容，其中每个图像都是文档中的页面，因此将在中间对齐。

感谢您的帮助！

Answer 1

将图片嵌套在另一个div内并将其display设置为inline-block

<强> HTML

<div id="outerdiv">
<div id="innerdiv">
<img src="http://ipsumimage.appspot.com/60x20,ff0000" />
<img src="http://ipsumimage.appspot.com/200x20,ff0000" />
<img src="http://ipsumimage.appspot.com/100x20,ff0000" />
</div>
</div>

<强> CSS

#outerdiv
{
overflow:auto;
width:100px;
background-color:gray;    
text-align:center;

}
#innerdiv {
display:inline-block;
}

请参阅此fiddle。

Answer 2

我刚刚开始使用jquery，但我可以给你一个理论上的答案。使用jquery获取父div的宽度。取图像的宽度。找到两者的差异并对图像中的数量负向移动。

示例：div width为50 图像宽度为100

将位置相对放在父div上把位置绝对放在图像上然后将50-100 = 50/2（实际上是25，因为宽度分布在两侧。左边25，左边25 5。）作为图像的左边

div parent{
position:relative;
}

div img{
position:absolute;
left:-25; //actually this is the difference of the image and div/2
}

使用jquery动态执行此操作

如何在较小的div的中心显示大图像

2 个答案: