下面是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的中间和中心?
当前回答
基本上,将左右边距设置为自动将导致图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
其他回答
试试下面的代码:
<div class="outer">
<img src="image.png"/>
</div>
和CSS:
.outer{
text-align: center;
}
.outer img{
display: inline-block;
}
基本上,将左右边距设置为自动将导致图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
我仍然有一些问题与其他解决方案在这里提出。最后,这对我来说是最好的:
<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%;
}
您可以在本页阅读更多关于这种方法的信息。
HTML:
<div id="over">
<img src="img.png">
</div>
CSS:
#over {
text-align: center;
}
#over img {
vertical-align: middle;
}
现在是2016年……为什么不使用flexbox? 它的反应也很灵敏。享受。 在{# 显示:flex; 对齐项目:中心; justify-content:中心; } < div id = " / " > < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >