下面是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 id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
其他回答
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
简单。2018. FlexBox。检查浏览器支持-我可以使用 最小的解决方案:
div#over {
display: flex;
justify-content: center;
align-items: center;
}
要获得尽可能广泛的浏览器支持:
div#over {
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
这应该有用。
测试要点:要运行代码段,请单击左键运行代码段,然后单击右链接完整页
#渐变{ 位置:固定;z - index: 10; 上图:0;右:0;底:0;左:0; 透明度:0.8;背景:黑色; 宽度:100%;高度:100%; text-align:中心; } .faders{显示:inline-block;高度:100%;vertical-align:中间;} .faderi{显示:inline-block; vertical-align:中间;} < div id = "渐变" > < span class = "投篮" > < / span > <img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" /> < / 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 >