码迷,mamicode.com
首页 > Web开发 > 详细

网页元素居中攻略记_(6)图片水平垂直居中

时间:2016-03-23 22:22:43      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:

前言

借助table的特性来实现


代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        .test{
            display:table;
            height:800px;
            width:800px;
            background:#99cc99;
            border-radius:5px;
            border:1px solid #f70;

        }
        .test>span{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
        }
        .test>span>img{
            height:400px;
            width:400px;
            border-radius:50%;
            box-shadow:1px 1px 3px rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div class="test">
        <span><img src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span>
    </div>
</body>
</html>

效果图

技术分享


结语

用position来定位也可以…这里只是展示另一种图片居中的方式,,感觉相当方便

网页元素居中攻略记_(6)图片水平垂直居中

标签:

原文地址:http://blog.csdn.net/crper/article/details/50965507

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!