無法居中顯示圖像

我正在嘗試遮住屏幕並在屏幕中間居中顯示圖像，高於所有其他元素。我有什麼不起作用（圖像是居中的部分）。無法居中顯示圖像

注意 - 我知道這可能是插件..但我想弄清楚如何做到這一點以及它是如何工作的。

var docHeight = $(document).height(); 

$("body").append("<div id='overlay'></div>"); 

$("#overlay").height(docHeight).css({ 
    'opacity': 0.4, 
    'position': 'relative', 
    'top': 0, 
    'left': 0, 
    'color': 'white', 
    'background-color': 'black', 
    'width': '100%', 
    'z-index': 5000 
}); 

$("#overlay").append("<div id='image-container'><img id='photo' src='" + $(this).attr('rel') + "' alt='image' /></div>"); 

$("#image-container").css("position", "absolute"); 
$("#image-container").css("top", Math.max(0, (($(window).height() - $("#image-container").outerHeight())/2) + $(window).scrollTop()) + "px"); 
$("#image-container").css("left", Math.max(0, (($(window).width() - $("#image-container").outerWidth())/2) + $(window).scrollLeft()) + "px");

CSS：

#image-container { 
    background: #FF0000; 
    z-index: 999999; 
}

我的形象，我是顯示在中心screen..not的右下角。我究竟做錯了什麼？

JsFiddle Here

來源

2012-06-20 Cody

是的，如果這是一個大的圖像，這不是一個很好的解決方案，你的代碼中心這裏的圖片，http://jsfiddle.net/5rRqS/，有什麼問題？ – undefined

看看更新後的圖像：這也將中間的左上角，而不是中間的圖像中間。 http://jsfiddle.net/5rRqS/1/ – Cody

看看BlockUI插件並對其進行逆向工程。已經進行了多年的戰鬥測試，並且由插件在許多大名網站上的優秀插件作者彙集在一起。在Firebug中花費幾分鐘會給你很多解釋 – charlietfl

Centering elements vertically is hard。一個平凡的解決方法是爲中心覆蓋屏幕元素的背景：

#overlay { 
    /*Cover the entire screen regardless of scrolling*/ 
    position:fixed;top:0;right:0;bottom:0;left:0; 
    background: #ff0000 url(...) no-repeat 50% 50%; 
}

Fiddle'd與演示目的半透明的bgcolor

來源

2012-06-21 02:21:47

完美。我試圖用絕對定位屏蔽屏幕，但由於其他元素，它不起作用。 – Cody

可以使固定的定位，寬度和高度100PERCENT和一個大Z-索引覆蓋。現在你有一個半透明的黑色div，它覆蓋整個窗口，而不是你想要的整個文檔。當我們固定這個定位時，即使您滾動頁面也不會滾動。現在要中心的圖像使用你簡單的數學。一種方法是將圖像定位爲絕對值，左邊爲50％，然後左邊爲 - （圖像寬度/ 2）。如果圖像寬度對於所有情況都是相同的並且可以添加到css上，這很有用。在這種情況下，你只需使用jquery淡入淡出div。現在沒有代碼，因爲我在手機上。

來源

2012-06-20 22:40:47 sabithpocker

你可以用純CSS做到這一點：http://jsfiddle.net/5rRqS/2/（即時通訊不知道所有的瀏覽器）。如果你想使用JS，你必須在加載圖像後運行定位腳本，或者將圖像寬度和高度添加到（通過屬性或樣式），或者將圖像的寬度和高度添加到（通過屬性或樣式）

然後使用類似

$(img).load(function(){ 
    // positioning script here 
})

來源

2012-06-20 22:49:12 mborecki

你的css解決方案是不正確的，因爲當以％設置頂部頁邊距時，該值的計算方式*總是相對於包含塊的**寬度**的百分比* https://developer.mozilla.org/zh/CSS/ margin-top –

是正確的 - 包含img的塊是＃image-container，它的大小始終與img相同。 – mborecki

再次錯誤，只是用不同尺寸的圖像替換，它明顯變爲未經過處理：http://jsfiddle.net/ovfiddle/5rRqS/3/ –

無法居中顯示圖像

回答

相關問題