欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片在容器里水平垂直居中

程序员文章站 2022-04-24 21:53:17
...

一、水平居中

.wrap{
        height: 200px;
        width:200px;
        text-align: center;
        }

.warp img{
        display: inline-block;          
        }
.wrap{
        height: 200px;
        width:200px
        }

.warp img{
        display: inline-block;  
                margin:0 auto;      
        }

二、垂直居中

        .warp{
            height: 200px;
            width: 200px;           
            line-height: 200px;//必须line-height=height
        }

        ul.news li img{
            vertical-align: middle;
            display: inline-block;;         
        }

为什么wrap在display=table-cell时,.wrap设置vertical-align: middle;无效??