0

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

目前，当所有图像都小于 div 时，它可以正常工作，但是当它们更宽时，它们会左对齐。如果它们都是相同的宽度，那么我可以设置 div 的滚动位置，但是它们是动态图像并且可以是任何宽度。以小提琴为例。

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

谢谢你的帮助！

4

2 回答 2

2

将图像嵌套在另一个图像中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;
}

看到这个小提琴。

于 2013-07-14T17:34:56.337 回答
0

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

示例：div 宽度为 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 动态执行此操作

于 2013-07-14T17:53:53.430 回答