下面是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 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;
}
其他回答
img.centered {
display: block;
margin: auto auto;
}
许多答案建议使用margin:0 auto,但只有当你试图使居中的元素不是浮动在左边或右边时,这才有效,即没有设置CSS属性float。为了做到这一点,将display属性应用到table-cell,然后将左右边距应用到auto,这样你的样式将看起来像style="display:table-cell;margin:0 auto;"
试试下面的代码:
<div class="outer">
<img src="image.png"/>
</div>
和CSS:
.outer{
text-align: center;
}
.outer img{
display: inline-block;
}
现在是2016年……为什么不使用flexbox? 它的反应也很灵敏。享受。 在{# 显示:flex; 对齐项目:中心; justify-content:中心; } < div id = " / " > < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>