下面是div
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
如何对齐图像,使其位于div的中间和中心?
下面是div
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
如何对齐图像,使其位于div的中间和中心?
当前回答
水平放置
#over img {
display: block;
margin: 0 auto;
clear:both;
}
另一种方法:
#over img {
display: inline-block;
text-align: center;
}
只需要放置:
#over img {
vertical-align: middle;
}
其他回答
身体{ 保证金:0; } #over img { margin-left:汽车; margin-right:汽车; 显示:块; } <div id="over" style="位置:绝对;宽度:100%;高度:100%”> < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >
JSFiddle
我向CSS添加了更多的属性。像这样:
div#over {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
-ms-align-items: center;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
我仍然有一些问题与其他解决方案在这里提出。最后,这对我来说是最好的:
<div class="parent">
<img class="child" src="image.png"/>
</div>
css3:
.child {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
// I suppose you may like those too:
// max-width: 80%;
// max-height: 80%;
}
您可以在本页阅读更多关于这种方法的信息。
你可以通过使用display:flex CSS属性轻松做到这一点:
#over {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
使用自举程序align-items和justification -content。请看下面的例子:
<div class="well" style="align-items:center;justify-content:center;">
<img src="img_source" height="50px" width="50px"/>
</div>