Question

我有一个包含图像的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手机（cordova），因此任何建议都可以针对该渲染引擎（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%;
}

Answer 1

添加此css：

#page {
  position: relative;
}

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

请注意，这与#page div的底部有关。

从顶部或底部以特定百分比定位动态大小的div

1 个答案: