不固定宽度和高度的图片在定宽定高的父容器中居中显示

来源:luqidong 发布时间:2013-08-30 21:37:49 点击数:
  定高定宽的图片在其父容器中定位很方便。方法也有很多。 而不同高度宽度的图片在父容器中定位,结合到浏览器的兼容,首先
可能会想到使用表格来实现这个效果。不否认,这是针对该问题的一种解决方法。
       搜了下相关问题,也有很多开发人员问到不使用表格来实现这种效果。 瞎折腾了一会。写了个。测试兼容IE 6+, FF,Opera,Google等浏览器。代码如下:
    <div style="height: 100px; width: 100px; overflow: hidden; display: table-cell; text-align: center;
             border: solid 1px black; vertical-align: middle; line-height: 100px;">
            <img src="../Include/Images/Userinfomation/ms_img18.gif" alt="" style="position: relative;
            _top: 50%; _margin-top: expression(this.height/2*-1);" />
    </div>