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

最新推荐文章于 2020-08-16 14:35:16 发布

会做饭的技术男

最新推荐文章于 2020-08-16 14:35:16 发布

阅读量486

点赞数 1

分类专栏：前端文章标签：【理解】css css

原文链接：https://www.mk2048.com/blog/blog.php?id=h1kj2jkj0ihj&title=%E5%9B%BE%E7%89%87%E5%9C%A8%E5%AE%B9%E5%99%A8%E9%87%8C%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD

版权

前端专栏收录该内容

2508 篇文章 11 订阅

订阅专栏

一、水平居中

.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;无效？？