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

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的宽度。采取图像的宽度。在两者中找出差异，并且对图像中的量产生负面影响。

实施例：格宽度为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做这个动态