下面是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;
}
其他回答
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
一个简单的方法是为div和图像创建单独的样式,然后分别放置它们。比方说,如果我想将图像位置设置为50%,那么我将有如下代码....
在{# 位置:绝对的; 宽度:100%; 高度:100%; } # img { 位置:绝对的; 左:50%; 右:50%; } < div id = " / " > <img src="img.png" id="img"> < / div >
<div>
<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>
</div>
我向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;
}
这将是一种更简单的方法
#over > img{
display: block;
margin:0 auto;
}