我將如何覆蓋偏移div中心的圖像？

我希望能夠將一些圖標置於位於已設置div的中間的橫幅上。我不能使用絕對定位，因爲它會居中，但不能保存它。我將如何能夠實現這一目標？我將如何覆蓋偏移div中心的圖像？

2011-03-05 Yesterday

可能margin: auto;有用嗎？或者你還需要垂直居中？

編輯：也許東西沿着線：

<div> 
    <div style="width:208px; height: 58px; margin: auto;"> 
    <img src="some_image_somewhere.png" width="208" height="58" style="position:absolute;"> 
    <img src="some_image_somewhere.png" width="208" height="58"> 
    </div> 
</div>

這顯示了在頂部DIV中心彼此兩個圖像，但它不漂亮（代碼明智的，IMO）。

來源

2011-03-05 10:06:51 ryuslash

不，只是水平的 – Yesterday 2011-03-05 10:08:40

這不起作用，它不在圖像上或頁面中央，絕對定位它仍然在div的左邊，只是覆蓋圖像下面的文本。 – Yesterday 2011-03-05 10:12:14

好吧，保證金似乎不起作用，但給父母div'text-align：center;'似乎確實如此。 – ryuslash 2011-03-05 10:17:47

需要都設置到一個絕對位置
的outter DIV必須是相對
也outter DIV的寬度應設置（當您指定一個完整的這樣寬度的圖像的容器，它將它對齊到中間（因爲你設置一個文本對齊：中心到你需要居中的div））。
每個圖像需要在它自己的div中有一個絕對位置（z順序與代碼中的一樣，後面的一個將位於最上面）。

代碼：

<div style="width:300px; height: 100px; position: relative;"> 
<div style="position: absolute;"><img src="http://i.stack.imgur.com/1aBfM.png" width="300" height="100"></div> 
<div style="position: absolute; width: 100%; text-align: center;"><img src="http://i.stack.imgur.com/DH3Qw.png" width="100" height="100"></div></div>

例如：http://jsfiddle.net/Y9PhP/

來源

2011-03-05 11:44:13 jackJoe

jackJoe是正確的。

您還可以使用style="position: absolute; top:10000px"來調整重疊圖像的高度。

來源

2013-05-30 13:11:48 nicou50

歡迎來到SO！這個答案是否真的爲這個問題增加了價值？已經接受的答案已經證明使用絕對定位。另外，一般來說，如果你知道另一個答案是正確的（jackjoe在你看來），正確的方法是提出答案。作爲新用戶，您還不能發表評論，甚至不滿意。但是，複製現有信息不會獲得您的聲望。 – cfi 2013-05-30 13:33:58

好的感謝指引我在正確的方向。 – nicou50 2013-06-18 19:02:31

我將如何覆蓋偏移div中心的圖像？

回答

相關問題