從頂部或底部以特定百分比定位動態大小的div

我有一個包含圖像的div，其中包含確保圖像縮放以適應窗口寬度的想法。工作正常，但我無法正確定位圖像水平;我想將它放在窗戶底部的某個位置，但它會粘在頂部。從頂部或底部以特定百分比定位動態大小的div

我的HTML如下：

<div class="page" id=""><div id="imagewrap"><img id="test" src="myimage.png" width="100%"></div></div>

的CSS是這樣的：

#imagewrap { 
    height: 100%; 
    width: 70%; 
    margin-left: auto; 
    margin-right: auto; 
    border:2px solid; 
}

這意味着，在Android手機（科爾多瓦）工作，所以任何意見可以具體爲渲染引擎（webkit）

當前版本在使用下面的一些註釋之後在底部但不居中：

#centerdiv { 
height: 100%; 
margin-left: auto; 
margin-right: auto; 
border:2px solid; 
width: 70%; 

} 
#imagewrap { 
border:2px solid; 
position: absolute; 
bottom: 0; /** percentage FROM bottom here **/ 
width: 100%; 
}

來源

2012-10-13 Maarten

與固定大小的塊內嵌入塊與文本對齊嗎？ –

給定底部的絕對位置很可能是最好的解決方案 –

添加這個CSS：

#page { 
    position: relative; 
} 

#imagewrap { 
    position: absolute; 
    bottom: 0; /** percentage FROM bottom here, currently this is at the bottom **/ 
}

請記住，這將是相關的#page div的底部。

來源

2012-10-13 17:40:58 Dave

好吧，那有效。我現在增加了位置：絕對;底部：0到#imagewrap img選擇器，以便圖像位於imagewrap div的底部。我現在唯一的問題是，我在左邊和右邊的自動對齊上垂直居中不起作用 – Maarten

絕對定位做到了這一點。它意味着一個生硬的「你留下先生，不要去任何地方！」一種工具。如果您想恢復利潤率，請嘗試將原始的'＃imagewrap'規則更改爲'#imagewrap> img'。如果這不起作用，請將img包裹在另一個div中，並將您的居中/邊距css規則放在該處。 – Dave

試過，但不知何故無法正常居中; div中心但圖像不是div的全部寬度，所以它看起來不居中..我添加了當前的CSS – Maarten

從頂部或底部以特定百分比定位動態大小的div

回答

相關問題