首页 > 网站 > WEB开发 > 正文

大小不确定图片垂直居中

2024-04-27 14:29:52
字体:
来源:转载
供稿:网友
大小不确定图片垂直居中

如果图片大小不确定,怎样使图片在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>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表