我無法使用jquery加載div中的圖像中心

我使用jquery動態加載圖像，並且似乎無法將它們置於div內。我的HTML看起來像這樣：我無法使用jquery加載div中的圖像中心

<div style="width:100%;border: solid 1px #ff0000;"> 
    <img id="current_photo" src="" style="margin-right: auto; margin-left: auto;max-width:97%;"/> 
</div>

jQuery的調用看起來是這樣的：

$("#current_photo").attr('src', img_url); 
    //$('#current_photo').css({'margin-right':'auto','margin-left':'auto'});

我假設我需要的圖像加載後應用CSS但這似乎不工作無論是。

無論我嘗試什麼，圖像總是左對齊。任何想法可能發生什麼？

來源

2012-11-29 Paul

這些東西更容易在直播現場或租賃的最小化版本調試（ http://jsfiddle.net/）。你可以有一些其他的CSS影響你的形象。 – JRomero

添加「text-align：center;」到你的包含div。也不需要自動邊距。

來源

2012-11-29 02:30:23 daniel

其次，.... – greener

我可以發誓我早些時候嘗試過，但再次插入它工作正常。謝謝！ – Paul

另外，Paul，您可以嘗試將src直接編碼到HTML中。幫助解決問題，找出是否jQuery或CSS不能按預期工作。 –

如果你想在js中完成它，請在加載你的img後試試這個函數。

setToCenterOfParent($("#current_photo"), $("#current_photo").parent()); 

function setToCenterOfParent(obj, parentObj) { 
    var height = $(obj).height(); 
    var width = $(obj).width(); 
    if (parentObj == window) { 
     $(obj).css('top', ($(parentObj).height()/2) - (height/2)); 
     $(obj).css('left', ($(parentObj).width()/2) - (width/2)); 
    } 
    else { 
     $(obj).css('top', ($(parentObj).height()/2) - (height/2) + $(parentObj).position().top); 
     $(obj).css('left', ($(parentObj).width()/2) - (width/2) + $(parentObj).position().left); 
    } 
}

來源

2012-11-29 02:31:30

你可以得到它通過添加這種風格你img工作：

display: block;

演示：http://jsfiddle.net/Zsq8Q/3/

的事實，你動態地設置src是不是這裏的問題，它是一個img元素默認情況下不是一個塊元素，因此除非你的使成爲一個塊，否則邊距設置不起作用。在容器

來源

2012-11-29 02:41:31 nnnnnn

text-align屬性將解決這個問題：

<div style="text-align:center; width:100%;border: solid 1px #ff0000;"> 
    <img id="current_photo" src="" style="margin-right: auto; margin-left: auto; max-width:97%;"/> 
</div>

演示：

http://jsfiddle.net/Zsq8Q/4/

來源

2012-11-29 02:46:53

我無法使用jquery加載div中的圖像中心

回答

相關問題