圖像背景位置以50％爲背景圖像居中，但定位元素不爲

-1

圖像背景位置爲50％左側居中背景圖像但絕對定位元素剩下50％不居中div元素爲什麼？圖像背景位置以50％爲背景圖像居中，但定位元素不爲

下面是代碼：

<div style="position:relative;height:100px; background:url(images/demo.jpg) no-repeat 50% 0"> 
     <div style="min-height:40px; width:140px; background-color:#aaa;position:absolute;top:0;left:50%;"> 
      heloo this is just a demo 
     </div> 
    </div>

運行這段代碼！

來源

2013-02-26 blue ghhgdtt

告訴我們代碼 – Toping 2013-02-26 11:20:05

我加了我的代碼 – 2013-02-26 16:02:47

將img設置爲塊元素並將其浮動到左側。

您可以使用display：table來顯示父div，並顯示：table-cell & vertical-align：位於img中間，這可能有助於使其對齊中心。

display: table-cell; 
vertical-align: middle;

來源

2013-02-26 11:17:26 Aleem

沒有代碼很難理解你的問題，但...

定位的元素絕對會相對於它的父元素定位。確保父元素具有適用的正確佈局（寬度，高度，position: relative等），您應該看到不同之處。

來源

2013-02-26 11:22:33 MassivePenguin

我在 – 2013-02-26 16:03:47

上面加了一個代碼你的代碼工作正常：http://jsfiddle.net/WmZsk/內部div的左上角位於它的0,50％家長。如果你想以內部div爲中心，最快捷的方法是定位它_relatively_而不是：http://jsfiddle.net/WmZsk/1/然後你可以使用z-indexing在其頂部放置另一個div。這不是非常有效，但我想不出另一種方式（沒有爲容器和內部div設置定義的寬度，或使用Javascript）來實現你想要的 - CSS只是沒有被切斷。 – MassivePenguin 2013-02-26 17:54:16

圖像背景位置以50％爲背景圖像居中，但定位元素不爲

回答

相關問題