0

我的图像有点问题。它实际上是一个 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;
}

我尝试将文本对齐应用到幻灯片 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;
}
4

2 回答 2

1

尝试

#slideshow img{
    ...
    left: 50%;
    margin-left: -/*half the width of the image in pixels*/; (-85px)
    ...
}
于 2012-04-04T17:23:49.703 回答
0

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

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

编辑回答评论：

像这样使用它：

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

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

于 2012-04-04T17:29:53.107 回答