Jquery & CSS 位置绝对中心答案

【问题标题】：Jquery & CSS position absolute centerJquery & CSS 位置绝对中心
【发布时间】：2012-04-18 11:00:29
【问题描述】：

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

【问题讨论】：

您说您使用的是jquery，因此您可以计算图像的大小和位置。如果这就是您所要求的，那么您想要的内容在纯 CSS 中是不可能的。
你使用的jquery插件叫什么名字？
简单的 jQuery 幻灯片脚本
你想看jQuery代码吗？
我很想知道如何使用 jQuery 计算图像的大小和位置，我对如何将其应用于我的代码感到困惑，有什么提示吗？

标签： jquery css image center

【解决方案1】：

试试

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

【讨论】：

不，没用 :( 它切断了我的图像，而且似乎没有使它们居中，哈哈

【解决方案2】：

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

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

编辑回答评论：

像这样使用它：

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

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

【讨论】：

我不明白这个解决方案:(