下面是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>
<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>
</div>
其他回答
我仍然有一些问题与其他解决方案在这里提出。最后,这对我来说是最好的:
<div class="parent">
<img class="child" src="image.png"/>
</div>
css3:
.child {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
// I suppose you may like those too:
// max-width: 80%;
// max-height: 80%;
}
您可以在本页阅读更多关于这种方法的信息。
基本上,将左右边距设置为自动将导致图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
我已经尝试了许多方法,但只有这一种适用于容器div中的多个内联元素。下面是将div中的所有内容对齐在中间的代码。
CSS
.divContainer
{
vertical-align: middle;
text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
vertical-align: middle;
}
HTML
<div class="divContainer">
<span>Middle Text</span>
<img src="test.png"/>
</div>
示例代码在这里:https://jsfiddle.net/yogendrasinh/2vq0c68m/
#over {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
}
根据您的需要修改高度值。
将img设置为display:inline-block,同时将高级div设置为text-align:center也可以完成这项工作
编辑:对于那些正在玩display:inline-block >>>的人,不要忘记例如,两个div像
<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>
它们之间真的没有空格(如图所示)。
只是基本避免这些(内联块固有)之间的差距。这些空白可以在我现在写的每两个字之间看到!:-)所以…希望这能对你们有所帮助。