site topic网站专题

首页

>

网站专题

>

专题详情

分享新闻到：

图片垂直居中解决办法

互诺科技：2009-10-22 15:17 阅读数：标签：

上周做需求，遇到相册中要实现图片垂直居中的问题，记得之前自己遇到过，但是很久没有做忘记了，这次重新温习一遍。其实如果单是针对FF，一个很简单的属性就可以解决，但是问题是我们要考虑ie，没有办法，要针对ie单独的写hack。其实结构很简单：

    <div class="img_wrap">
          <img src="images/RED_0099.JPG" alt="桂林" />
    </div>

主要是样式书写，代码如下：

.img_wrap{/*非IE的主流浏览器识别的垂直居中的方法*/
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    *display: block;
    *font-size: 131px;/*约为高度的0.873，150*0.873 约为131*/
    width:150px;
    height:150px;
    border: 1px solid #ccc;}
.img_wrap img{vertical-align:middle;}

显示效果如下：

但是如果给img外边的标签添加一个属性就会使得在ff下面失效。图片在ff下面就不会垂直居中显示：

这个干扰属性就是浮动，上面的效果就是给img外边的div添加了以float:left属性，所以大家如果利用相同的办法不能使得图片垂直居中，可以查找下是不是利用了浮动。

当然这个只是其中的一个办法，还有其他的方法，大家可以继续进行探讨。