利用空白标签实现img图片的垂直居中

时间 2021-01-30

标签 css html 前端 css3 web ide spa htm 教程图片栏目 HTML 繁體版

原文原文链接

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），而且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-p_w_picpath）形式展现，是以<img>元素形式展现的。css

在img的同级元素添加一个空白的span标签，将span行内元素设置为行内块元素，也就是将其display设置为“inline-block”，将其宽度定位1px，height为容器的100%，这样高度能够和容器的高度达到同样，而后经过“vertical-align:middle”设置垂直对齐，从而实现所须要的效果。html

代码以下前端

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .wrap{
            width:500px;
            height:500px;
            border:1px solid #000;
            text-align:center;
        }
        span{
            height:100%;
            width:1px;
            vertical-align:middle;
            display:inline-block;
        }
        img{
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="p_w_picpaths/con3.png" alt="" /><span></span>
    </div>
</body>
</html>

兼容IE6/7/8等css3

参考自w3cplus的CSS制做图片水平垂直居中web