首页 > 代码库 > 大小不确定图片垂直居中
大小不确定图片垂直居中
如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用css来控制的情况。
如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmiddle",图片在垂直方向似乎都无动于衷。
发现了如下一个方法,做个收藏。
样式部分:
.middle-out{
width: 600px;
height: 385px;
position: relative;
display: table-cell;
vertical-align: middle;
text-align:center;
border: 1px solid #f00;
}
.middle-in{
position: static;
*position:absolute;
top:50%;
}
.middle-out .middle-in img{
position:static;
*position:relative;
top:-50%;
left:-50%;
}
HTML部分:
<div class="middle-out">
<div class="middle-in">
<img src="" />
</div>
</div>
大小不确定图片垂直居中