图片垂直居中大杂烩 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    img{
        border: 0;
    }
    body{
        background-color: #fff;
    }
    /*........................当包裹中有inline-block的东西时，包裹font-size设置为0.................*/
    .list{
        list-style: none;
        overflow: hidden;
    }
    .list li{
        width: 200px;
        height: 200px;
        border: 1px solid #333;
        margin: 10px;
        float: left;
        text-align: center;
    }
    /*ie7以上*/
    .list .item1{
        line-height: 200px;
        font-size: 0;
    }
    .list .item1 img{
        vertical-align: middle;
    }

    /*after伪类*/
    .list .item2{
        line-height: 200px;
        font-size: 0;
    }
    .list .item2:after{
        content: ".";
    }
    .list .item2 img{
        vertical-align: middle;
    }
    /*空格&nbsp;*/
    .list .item3{
        line-height: 200px;
        font-size: 0;
    }
    .list .item3 img{
        vertical-align: middle;
    }

    /*空标签或空图片兼容ie6*/
    .list .item4{
        line-height: 200px;
        font-size: 0;
    }
    .list .item4 span{
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
    .list .item4 img{
        vertical-align: middle;
    }


    /*透明图片+背景兼容ie6*/
    .list .item5 img{
        width: 100%;
        height: 100%;
    }


    /*淘宝的解决方案display:table-cell;兼容ie6*/
    /*当有display:table-cell;时不能浮动，当需要浮动时解决办法为外层多套一个div*/
    .taobao{
        position: relative;
        left: 10px;

        width: 200px;
        height: 200px;
        border: 1px solid #333;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        float: none;
        font-size: 0;

        *display: block;
        *font-size:175px;
        *font-family: Arial;
    }
    .taobao img{
        vertical-align: middle;
    }
    </style>
</head>
<body>
    <ul class="list">
        <li class="item1"><img src="head.png" height="100" width="100" alt=""></li>
        <li class="item2"><img src="head.png" height="100" width="100" alt=""></li>
        <li class="item3"><img src="head.png" height="100" width="100" alt="">&nbsp;</li>
        <li class="item4"><img src="head.png" height="100" width="100" alt=""><span></span></li>
        <li class="item5"><img src="bg.gif" style="background:url(head.png) no-repeat center center" alt=""></li>
    </ul>
    <div class="taobao"><img src="head.png" height="100" width="100" alt=""></div>
</body>
</html>
posted @ 2015-12-15 14:07  DuangDang  阅读(182)  评论(0)  编辑  收藏  举报