后端撸前端系列之 - 图片水平垂直居中

身边没有牛逼的前端可以合作真捉急，急的后端都自己开撸了

 

<!doctype <!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .dv {
        border: 1px dotted #777;
        margin-top: 20px;
    }
    
    .cc {
        background: #999;
        width: 650px;
        height: 715px;
        display: table-cell;
        vertical-align: middle;
    }
    
    .cc img {
        width: 100%;
        vertical-align: middle;
    }
    </style>
</head>

<body>
    <div class="dv">
        <div class="cc">
            <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/4034970a304e251fddcebf70a686c9177f3e5378.jpg" />
        </div>
    </div>
    <div class="dv">
        <div class="cc">
            <img src="http://f.hiphotos.baidu.com/image/pic/item/a50f4bfbfbedab64a65235c9f536afc379311e92.jpg" />
        </div>
    </div>
    <div class="dv">
        <div class="cc">
            <img src="http://image15-c.poco.cn/best_pocoers/20131211/30532013121114394934345979.jpg" />
        </div>
    </div>
</body>

</html>

 

posted @ 2015-07-31 21:57  CooMark  阅读(253)  评论(0)  编辑  收藏  举报