jquery＆CSS绝对中心位置

我一直对我的图片有点问题。它实际上是一个jQuery幻灯片。图像的位置是绝对的，这使得它棘手的中心他们...jquery＆CSS绝对中心位置

这很适合我

#slideshow IMG { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:8; 
    opacity:0.0; 
    width:100%; 
    text-align:center; 
}

但宽度100％它使div的图像100％它的内部。一些图像比其他图像更薄，我只想让这些图像居中。宽度为100％时，可以伸展出薄的图像。

下面是HTML

<div class="contentImages"> 

<div id="slideshow"> 

<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" /> 

<img src="upload/<?php echo $array['image2'] ?>" height="200" /> 

<img src="upload/<?php echo $array['image3'] ?>" height="200" /> 

</div></div>

和CSS

#slideshow { 
    position:relative; 
    height:200px; 
    overflow:hidden; 
    float:left; 
    width:250px; 
} 

.contentImages{ 
    border:1px solid #CCC; 
    padding:10px; 
    margin:20px auto 0; 
    position:relative; 
    width:750px; 
    overflow:hidden; 
}

我试图将文本对齐到幻灯片div的休息，但没有做任何事情我甚至试图将幻灯片div设置为绝对位置和文本对齐中心，但没有（有或没有宽度为100％或250像素）工作，它只显示图像的10％，它们是没有集中。

长话短说，我如何让我的图像居中而不会伸出薄薄的图像？

我希望这是有道理的。

谢谢。

----添加-----

我已经尝试通过使用此代码

$(window).bind('load', function() { 
    var img_width = $("#slideshow img").width(); 
    $("#slideshow img").css("width", img_width); 
    alert(img_width); 
});

去jQuery的溃败，但警告对所有图像的返回255，连薄的图像。

我调整我的CSS太

#slideshow IMG { 
    position:absolute; 
    top:0; 
    z-index:8; 
    opacity:0.0; 
    text-align:center; 
}

来源

2012-04-04 user1274810

你说你正在使用jQuery，所以你可以计算出图像的大小和位置应该是什么。如果这就是你所要求的，你想要的东西在纯CSS中是不可能的。 – 2012-04-04 17:27:53

你正在使用的jquery插件的名称是什么？ – 2012-04-04 17:41:54

简单的jQuery幻灯片脚本 – user1274810 2012-04-04 17:50:54

尝试

#slideshow img{ 
    ... 
    left: 50%; 
    margin-left: -/*half the width of the image in pixels*/; (-85px) 
    ... 
}

来源

2012-04-04 17:23:49 Joe

没有没有工作:(它切断了我的图像，它似乎并没有居中，大声笑 – user1274810 2012-04-04 17:29:19

乔的回答是的伎俩，而是因为它如果你browserscreen不工作比你要把图像宽度使用这个：http://d-graff.de/fricca/center.html

这是绝对解决居中问题的技巧，它使用了乔的技术，但稍微改进了一点。

编辑回答评论：

使用方法如下：

<div id="distance"></div> 
<img src="img/some-img.png" alt="some alt">

，你可以找到在网站broncode的CSS（带注释）。

来源

2012-04-04 17:29:53

我不明白这个解决方案:( – user1274810 2012-04-04 17:33:16

这没有工作要么:( – user1274810 2012-04-04 17:50:03

jquery＆CSS绝对中心位置

回答

相关问题