div 图片居中

1.css实现

　　1>主要使用display:table-cell 属性，然后根据table-cell的对齐特性。

　　2>把img当做行内元素，行高与div高度一致，然后调整。

2.javasript 实现

　　分别取div 的宽div_w,高div_h；

　　img的宽img_w，高img_h，

　　计算图片相对于div边界的偏移值x: (div_w - img_w) / 2, y:(div_h - img_h) / 2

　　然后设定css值。

　　下面是代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!--
    css 1
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bgTest{
            background-color: #57d5d5;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            display: table-cell;
            text-align:center;
            vertical-align: middle;
        }
        .another{
            background-color: #79a75d;
        }
    </style>
    -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bgTest{
            background-color: #57d5d5;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            line-height: 400px;
            text-align: center;
        }
        .another{
            background-color: #8d50ff;
        }
        img{
            vertical-align: middle;
        }
    </style>

</head>
<body>
     <div class="bgTest" >
         <img class="testImg" src="test1.jpg">
     </div>
     <div class="bgTest another" >
         <img class="testImg" src="test1.jpg">
     </div>
     <script src="jquery-1.9.1.min.js"></script>
     <!--
      <script>
         $(function(){
             var bg = $(".bgTest");
             bg.each(function(){
                 var img = new Image();
                 img.src= $(this).find("img").first().attr('src');
                 $(this).find("img").first().css({position:"relative",
                     left:($(this).width() - img.width) /2,
                     top:($(this).height() - img.height) / 2}
                 );
             })
         });
     </script>
     -->

</body>
</html>

注释的部分分别是 css 方法1 和javascript方法。

posted on 2013-05-28 22:25 joe_whu 阅读(221) 评论(0) 编辑收藏举报