阿赛·游梦鱼·郭言赛·阿赛工作室
技术分类
推荐技术
近期热门技术

图片垂直居中

  •  字体:
  • 图片垂直居中是个经典的问题,网上关于这个的方法也非常多,良莠不齐,本人比较推荐的以下三种简单的方法,大家可以稍做参考。
    1.淘宝的方法
    在曾经的"淘宝UED招聘"中有这样一道题目:
    “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
    当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。
    题目的难点在于两点:
    垂直居中;
    图片是个置换元素,有些特殊的特性。
    至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:
    .box {
     
     display: table-cell;
     vertical-align:middle;
     
     text-align:center;
     
     *display: block;
     *font-size: 175px;
     *font-family:Arial;
     width:200px;
     height:200px;
     border: 1px solid #eee;
    }
    .box img {
     
     vertical-align:middle;
    }
    <div class="box">
     <img src="http://pics.taobao.com/bao/album/promotion/
    taoscars_180x95_071112_sr.jpg" />
    </div>
    2.背景法
    <style type="text/css">
    * {margin:0;padding:0;}
    div {
        width:500px;border:1px solid #f00;
        height:500px;
        background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
        }
    </style>
    <div>
    </div>
    最简单的方法莫过于背景法了,但不利于动态导入的图片
    3.背景法
    .qq {
        width:500px;
        display:table-cell;
        height:400px;
        text-align:center;
        vertical-align:middle;
        border: 1px solid #000
    }
    i {
        display:inline-block;
        height:100%;
        vertical-align:middle
    }
    .qq img {
        vertical-align:middle;
    }
    </style>
    <div class="qq"><i></i><img src="http://www.baidu.com/img/baidu_logo.gif" /></div>
    这种方法也很简单,但需要加一个<i>的额外标签,小不爽~
    如果页面需要一两个居中的图片,那此方法是可推荐,但如果很多个产品的图,那加的标签数量可不是小数目喽~大家衡量着使用吧
    另外也有其它的许多解决方法,只是看起来并不怎么理想,相对简单并且可推荐就是以上这三种,其它的这里就不作介绍了,有兴趣的朋友可以看这里:http://bbs.blueidea.com/thread-2666987-1-9.html
    另外,再说一下文字垂直居中的方法。一直以为此方法同样有效于图片,只是昨天做一个DEMO才发现原来不行。
    div{
        height: 400px;
        line-height: 400px;
        overflow: hidden;
        }
    此方法也只适用于单行的文字,或者是图片+文字,通常可见于页面上的前面带有小图标的链接或标题等。
    Powered by EESai.Com ©  2017  阿赛工作室 All Rights Reserved
    本网站由 阿赛工作室 提供源代码技术支持.  备案号:苏ICP备08114364号
    网站地图建议反馈MapRssXml回到顶部