下面是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的中间和中心?
当前回答
你可以看看这个解决方案:
水平和垂直居中一个盒子中的图像
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style>
<!--[endif]-->
<div class="wraptocenter"><span></span><img src="..." alt="..."></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%;
}
您可以在本页阅读更多关于这种方法的信息。
#over {position:relative; text-align:center;
width:100%; height:100%; background:#CCC;}
#over img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
我向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;
}
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 >
HTML:
<div id="over">
<img src="img.png">
</div>
CSS:
#over {
text-align: center;
}
#over img {
vertical-align: middle;
}