知向前端
首页
微语
登录
图片水平垂直都居中，兼容ie7及以上和主流浏览器
2015-9-28 Jon
图片水平垂直都居中，亲测兼容ie7及以上和其他主流浏览器
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>图片水平垂直都居中，兼容ie7及以上和主流浏览器</title><br /> <style><br /> *{margin:0;padding:0;}<br /> ul,li{list-style:none;}<br /> .list{width:800px;margin:0 auto;}<br /> .list li{text-align:center;float:left;line-height: 30px;width:33.3%;margin-top:20px;}<br /> .list-item{width:200px;margin:0 auto;}<br /> /*关键代码*/<br /> .img-wrap{display:block; width:200px; height:200px;overflow:hidden;line-height:200px; border:1px solid #ccc; text-align:center;}<br /> .img-wrap img{vertical-align:middle;max-width: 200px;max-height:200px;}<br /> </style><br /> </head><br /> <body><br /> <ul class="list"><br /> <li><br /> <div class="list-item"><br /> <a class="img-wrap" href="#"><br /> <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" /><br /> </a><br /> <p>图片水平垂直居中</p><br /> </div><br /> </li><br /> <li><br /> <div class="list-item"><br /> <a class="img-wrap" href="#"><br /> <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" /><br /> </a><br /> <p>图片水平垂直居中</p><br /> </div><br /> </li><br /> <li><br /> <div class="list-item"><br /> <a class="img-wrap" href="#"><br /> <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" /><br /> </a><br /> <p>图片水平垂直居中</p><br /> </div><br /> </li><br /> <li><br /> <div class="list-item"><br /> <a class="img-wrap" href="#"><br /> <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" /><br /> </a><br /> <p>图片水平垂直居中</p><br /> </div><br /> </li><br /> <li><br /> <div class="list-item"><br /> <a class="img-wrap" href="#"><br /> <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" /><br /> </a><br /> <p>图片水平垂直居中</p><br /> </div><br /> </li><br /> <li><br /> <div class="list-item"><br /> <a class="img-wrap" href="#"><br /> <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" /><br /> </a><br /> <p>图片水平垂直居中</p><br /> </div><br /> </li><br /> </ul><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看