如果图片大小不确定,怎样使图片在DIV中垂直水平居中呢?当然,如果用表格的话,另当别论了。这里只讨论使用CSS来控制的情况。
如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用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:1pxsolid#f00;
}
.middle-in{
position:static;
*position:absolute;
top:50%;
}
.middle-out.middle-inimg{
position:static;
*position:relative;
top:-50%;
left:-50%;
}
HTML部分:
<div class="middle-out">
<div class="middle-in">
<img src="" />
</div>
</div>
新闻热点
疑难解答