Question

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

这对我有用

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

但是宽度为100％，它使得图像100％的div在里面。有些图像比其他图像更薄，我只想让那些图像居中。宽度为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;
}

我尝试将text-align应用于幻灯片div，但是没有做任何事情我甚至尝试将幻灯片div设置为绝对位置和文本对齐中心但是没有（带有或者没有宽度为100％或250px;）工作时，它只显示了10％的图像，并且它们也没有居中。

长话短说，如何在不拉伸细像的情况下将图像置于中心位置？

我希望这是有道理的。

感谢。

---- -----加

我尝试使用此代码

进行jQuery路由

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

但所有图像的警报都返回255，即使是薄图像也是如此。

我也调整了我的CSS

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

Answer 1

尝试

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

Answer 2

乔的回答是诀窍，但是因为如果你的浏览器屏幕小于图像宽度它不起作用你应该使用它：http://d-graff.de/fricca/center.html

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

编辑回答评论：

像这样使用：

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

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

Jquery＆amp; CSS位置绝对中心

2 个答案: