我有以下的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 > img{
display: block;
margin:0 auto;
}
Well, we are in 2016... why not use flexbox? It's also responsive. Enjoy.
#over{
display:flex;
align-items:center;
justify-content:center;
}
<div id="over">
<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>
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;
}
将img的属性设置为display:inline-block,同时将上级
编辑:对于那些正在尝试使用display:inline-block的人们,请不要忘记,例如两个
<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>
确实在它们之间没有空格(如此处所见)。
只需基本地避免它们之间的这些(内联块固有的)间隙。您现在正在写的每两个单词之间都可以看到这些间隙! :-) 希望这能帮助到您中的一些人。
我尝试了许多方法,但只有以下方法适用于包含多个内联元素的容器div。下面是将div中的所有内容对齐到中间的代码。
.divContainer
{
vertical-align: middle;
text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
vertical-align: middle;
}
<div class="divContainer">
<span>Middle Text</span>
<img src="test.png"/>
</div>
只需设置父级 div 的 CSS 属性 "text-align:center;"。
<div style="text-align:center; width:100%">
<img src="img.png">
</div>
CSS文件
.over {
display : block;
margin : 0px auto;
对于这个问题,选中的答案无法使图像垂直对齐。现代浏览器的一个合适解决方案是Flexbox。Flex容器可以配置为水平和垂直对齐其项目。
<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
<img src="img.png">
</div>
#img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div class="outer">
<img src="image.png"/>
</div>
同时还有CSS:
.outer{
text-align: center;
}
.outer img{
display: inline-block;
}