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