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絕對中心位置

回答

相關問題