下面是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的中间和中心?
当前回答
将img设置为display:inline-block,同时将高级div设置为text-align:center也可以完成这项工作
编辑:对于那些正在玩display:inline-block >>>的人,不要忘记例如,两个div像
<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>
它们之间真的没有空格(如图所示)。
只是基本避免这些(内联块固有)之间的差距。这些空白可以在我现在写的每两个字之间看到!:-)所以…希望这能对你们有所帮助。
其他回答
这为我工作,当你必须居中对齐图像和你的父div图像已经覆盖整个屏幕。即高度:100%,宽度:100%
#img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
将img设置为display:inline-block,同时将高级div设置为text-align:center也可以完成这项工作
编辑:对于那些正在玩display:inline-block >>>的人,不要忘记例如,两个div像
<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>
它们之间真的没有空格(如图所示)。
只是基本避免这些(内联块固有)之间的差距。这些空白可以在我现在写的每两个字之间看到!:-)所以…希望这能对你们有所帮助。
基本上,将左右边距设置为自动将导致图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</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;
}
<div>
<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>
</div>