如何在水平居中的頁面上顯示div下面的圖片？

我有這樣的佈局： webpage screenshot 如何在水平居中的頁面上顯示div下面的圖片？

代碼在這裏：http://m6000225.ferozo.com/test/

我需要的藍色和棕色形象奠定了主要內容的DIV下方，無論窗口寬度的兩個對齊，無論水平居中。
我實現了一個css的提示，我在這個網站上讀到，它有一個絕對位置的div，左：50％，img裏面有相對位置，左：-50％。它可以正常工作，除了它將頁面寬度向右推，因爲您可以在屏幕截圖中看到滾動條可以看到。
第三方lib解決方案，如jQuery是受歡迎的，但我更喜歡純CSS。

PS：我還需要在頁腳下面有類似的東西，但我想用同樣的解決方案和負值底部值應該可以，對不對？

PS2：將藍色條帶延伸到窗口的兩個邊界是沒問題的，因爲我已經使用了絕對位置和背景重複的另一個div：repeat-x。

來源

2014-01-17 Petruza

看起來像一個簡單的例子，身體的bg圖像（s），位於中心。 –

@Paulie_D，但我也需要條帶動態地擴展到頁面的邊界，所以我需要兩個背景，一個與repeat-x，所以另一個，沒有重複，必須是一個div，居中。 – Petruza

但你確實是對@Paulie_D，我確實使用了一個以div爲中心的背景圖片，並且它工作正常。謝謝！將您的評論複製並粘貼爲答案，以便我可以將其標記爲正確。 – Petruza

滾動條正在出現，因爲類.header-image上的left: 50%;。你應該完全放棄。由於該標籤的寬度已設置，因此當您將其超過50％時，它會落在窗口之外，迫使滾動條出現。

在您放下左側的調用之後，您應該將該div的寬度設置爲窗口的寬度，而不是以像素爲單位的特定值。使用Width: 100%。所以，該標籤應該看起來像：

.header-image { 
    height: 245px; 
    position: absolute; 
    top: 40px; 
    width: 100%; 
    z-index: -1; 
}

之後，你需要重新中心包含在div中的圖像中心。要做到這一點，而不是使用職位（依賴設定的邊界），給元素自動邊距。使用：

.header-image img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

這將重新映射圖像。請讓我知道這是你在找什麼！

來源

2014-01-17 16:43:04

不，我已經嘗試過這種解決方案，但圖像保持左對齊，不居中，請檢查更新後的代碼：http://m6000225.ferozo.com/test （我正在Chrome上試用） – Petruza

有趣。 FF對我來說工作得很好。我希望看到Chrome中失敗的內容 - 這是相當常見的CSS。出於古董，你可以發佈這個版本，看看有什麼不同嗎？ –

糟糕，已經在本地和遠程覆蓋文件。但它確實是常見的CSS，這是我首先嚐試的直觀解決方案，但Chrome並不喜歡它。我認爲，也許它是一個絕對定位的對象，爲了計算自動邊距，Chrome的百分比寬度可能沒有意義。 – Petruza

每Paulie_D的建議：

.header-image { 
position:absolute; 
z-index: -1; 
top: 40px; 
width: 100%; 
height: 245px; 
background-image: url('header.png'); 
background-position: center; 
background-repeat: no-repeat;

}
這做到了。

來源

2014-01-17 17:06:50 Petruza

如何在水平居中的頁面上顯示div下面的圖片？

回答

相關問題