我有以下的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">
</div>
如何将图像对齐以位于div的中间和中心位置?
#over{
position:absolute;
width:100%;
height:100%;
}
#img{
position:absolute;
left:50%;
right:50%;
}
<div id="over">
<img src="img.png" id="img">
</div>
很长一段时间以来,我也尝试着把图片放在居中的 div 中,但对于我的情况,我只需要在 ajax 加载进度中使用这种类型的组件,因此我简单地尝试了以下解决方案,希望这能对你有所帮助!
<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></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;
}
align-items
和justify-content
。请参见以下示例:<div class="well" style="align-items:center;justify-content:center;">
<img src="img_source" height="50px" width="50px"/>
</div>
#over {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
}
根据您的需要修改高度值。
这应该可以工作。
测试重要提示:要运行代码片段,请单击左侧按钮运行代码片段,然后单击右侧链接全页
#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}
<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://istack.dev59.com/qHF2K.webp" />
</div>
<div id="over" style="position:absolute; width:100%; height:100%>
<center>
<img src="img.png">
</center>
</div>