图片水平垂直都居中，兼容ie7及以上和主流浏览器

2015-9-28 Jon html+css

图片水平垂直都居中，亲测兼容ie7及以上和其他主流浏览器

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>图片水平垂直都居中，兼容ie7及以上和主流浏览器</title>
      <style>
        *{margin:0;padding:0;}
        ul,li{list-style:none;}
        .list{width:800px;margin:0 auto;}
        .list li{text-align:center;float:left;line-height: 30px;width:33.3%;margin-top:20px;}
        .list-item{width:200px;margin:0 auto;}
        /*关键代码*/
        .img-wrap{display:block; width:200px; height:200px;overflow:hidden;line-height:200px; border:1px solid #ccc; text-align:center;}
        .img-wrap img{vertical-align:middle;max-width: 200px;max-height:200px;}
      </style>
  </head>
  <body>
    <ul class="list">
      <li>
        <div class="list-item">
          <a class="img-wrap" href="#">
            <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" />
          </a>
          <p>图片水平垂直居中</p>
        </div>
      </li>
      <li>
        <div class="list-item">
          <a class="img-wrap" href="#">
            <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" />
          </a>
          <p>图片水平垂直居中</p>
        </div>
      </li>
      <li>
        <div class="list-item">
          <a class="img-wrap" href="#">
            <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" />
          </a>
          <p>图片水平垂直居中</p>
        </div>
      </li>
      <li>
        <div class="list-item">
          <a class="img-wrap" href="#">
            <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" />
          </a>
          <p>图片水平垂直居中</p>
        </div>
      </li>
      <li>
        <div class="list-item">
          <a class="img-wrap" href="#">
            <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" />
          </a>
          <p>图片水平垂直居中</p>
        </div>
      </li>
      <li>
        <div class="list-item">
          <a class="img-wrap" href="#">
            <img src="http://yuanqiao.comxa.com/yqiao/img/erweima.png" width="160" alt="" />
          </a>
          <p>图片水平垂直居中</p>
        </div>
      </li>
    </ul>
  </body>
  </html>

您可以修改框中代码后运行查看

标签: 图片

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇页面滚动时导航一直停留在顶部demo
上一篇精选十个恐怖逻辑推理，你能猜对几个？

发表评论：

知向前端

图片水平垂直都居中，兼容ie7及以上和主流浏览器

图片水平垂直都居中，亲测兼容ie7及以上和其他主流浏览器

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档