我想把一张图片放在一个div的中央位置。这个方法很好用,但是在安卓浏览器上,top
属性没有任何效果。
很可能是因为我的div设置有误,导致图片无法确定其容器的高度(所以百分比也没有意义...)。
这里是jsfiddle。
HTML代码:
<div class="container">
<img src="http://i.imgur.com/qRkEJni.jpg">
</div>
CSS:
.container {
height:200px;
width:200px;
float:left;
overflow: hidden;
}
.container img {
height: auto;
width:100%;
top:50%;
left:0;
position: relative;
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}