下面是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 css属性“text-align:center;”
<div style="text-align:center; width:100%">
<img src="img.png">
</div>
其他回答
#over {position:relative; text-align:center;
width:100%; height:100%; background:#CCC;}
#over img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
现在是2016年……为什么不使用flexbox? 它的反应也很灵敏。享受。 在{# 显示:flex; 对齐项目:中心; justify-content:中心; } < div id = " / " > < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >
很长一段时间,我也尝试了解决方案,把img放在div的中心,但对于我的情况下,我只需要这种类型的组件在ajax加载进度,所以我简单地尝试了以下解决方案,希望这对你有帮助!
<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>
这招对我很管用。
<div class="CenterImage">
<asp:Image ID="BrandImage" runat="server" />
</div>
注意:在这种情况下,没有与'BrandImage'相关的css类
CSS:
.CenterImage {
position:absolute;
width:100%;
height:100%
}
.CenterImage img {
margin: 0 auto;
display: block;
}
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>