下面是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的中间和中心?
当前回答
HTML:
<div id="over">
<img src="img.png">
</div>
CSS:
#over {
text-align: center;
}
#over img {
vertical-align: middle;
}
其他回答
一个简单的方法是为div和图像创建单独的样式,然后分别放置它们。比方说,如果我想将图像位置设置为50%,那么我将有如下代码....
在{# 位置:绝对的; 宽度:100%; 高度:100%; } # img { 位置:绝对的; 左:50%; 右:50%; } < div id = " / " > <img src="img.png" id="img"> < / div >
只需设置父div css属性“text-align:center;”
<div style="text-align:center; width:100%">
<img src="img.png">
</div>
Daaawx的答案是可行的,但我认为如果我们消除内联css会更干净。
身体{ 保证金:0; } #over img { margin-left:汽车; margin-right:汽车; 显示:块; } div.example { 位置:绝对的; 宽度:100%; 高度:100%; } <div class="example" id="over"> < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >
这将是一种更简单的方法
#over > img{
display: block;
margin:0 auto;
}
基本上,将左右边距设置为自动将导致图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>