下面是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;
}
其他回答
img.centered {
display: block;
margin: auto auto;
}
使用定位。下面的方法对我很有效……
缩放到图像的中心(图像填充div):
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
没有缩放到图像的中心(图像不填充div):
div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
这为我工作,当你必须居中对齐图像和你的父div图像已经覆盖整个屏幕。即高度:100%,宽度:100%
#img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
使用自举程序align-items和justification -content。请看下面的例子:
<div class="well" style="align-items:center;justify-content:center;">
<img src="img_source" height="50px" width="50px"/>
</div>
HTML:
<div id="over">
<img src="img.png">
</div>
CSS:
#over {
text-align: center;
}
#over img {
vertical-align: middle;
}