把圖像放在div的正面和中心

我看過這個問題的很多變體，但還沒有找到任何可取的答案。把圖像放在div的正面和中心

我想把中心的圖像放在div的前面。

如果我有一個div正在加載AJAX的內容，我會（使用css，jquery，不過）把一個圖像中被加載div的前面，然後將其刪除時div加載完成。現在，雖然情況如此，但解決方案不應侷限於這種具體情況。希望我（和其他任何人）能夠在div需要過分拍攝圖像時做到這一點。

這是要點。我不想將整個屏幕變灰，並將圖像放在窗口的中央，或放在下面，或放在側面或絕對位置。這些事情比較簡單。我想要在給定div的中間，無論那個div可能碰巧是中間的圖像。

注：我更喜歡不需要額外的jquery插件的解決方案。我想用盡可能少的代碼來完成工作。

來源

2013-07-24 MirroredFate

固定大小的DIV？否則，如果它尚未加載，它將沒有確定的高度和寬度。 –

您可以在加載div中創建一個div，然後設置屬性'margin：auto auto;'。當AJAX加載完成後，讓它使用jQuery將div的顯示設置爲'display：none;' –

應該使用div的當前高度和寬度。就像我說的，不要陷入使用Ajax的細節。基本上只有一個div需要在中心覆蓋圖像。 @RyanSparks你有沒有可能比這更具體？ – MirroredFate

將圖像放置在您喜歡的位置用CSS。如果圖像永遠不會改變大小，這可能工作：

.mydiv { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -#px (where # is half the width of the image); 
    margin-top: -#px (where # is half the width of the image); 
}

然後做這樣的事情來檢測頁面加載和隱藏div。如果你喜歡，你也可以使用.remove（）。

$(window).load(function() { 
     $(".mydiv").hide(); 
});

要定位特定項目並檢測它是否已加載，請執行$（「。mydiv」）。load（function（）{}）;

應該指出的是，有一個無數的其他方法中心的圖像中心的div。你可以用position: absolute;和z-index: 1;做width: 100%; height: 100%;，然後把圖像作爲background: url('myimage.png') no-repeat scroll center center transparent;。

你可以用：before或者：after僞元素來做到這一點，這樣你甚至不需要向HTML添加任何東西。

您還可以設置標籤，並在div的底部，然後將圖像作爲display: block;和margin: auto auto;等

來源

2013-07-24 23:59:00

把圖像放在div的正面和中心

回答

相關問題