首页 > 其他 > 详细

图片垂直居中

时间:2014-04-19 06:29:37      阅读:487      评论:0      收藏:0      [点我收藏+]

对支持 display:table-cell; 属性的浏览器,结合 vertical-align:middle; 属性就可以实现垂直居中;

在不支持 display:table-cell; 的浏览器(IE)中利用文字结合行高的方法来实现垂直居中;

效果:

  • bubuko.com,布布扣
  • bubuko.com,布布扣
  • bubuko.com,布布扣

代码:

bubuko.com,布布扣
<style type="text/css">
.listImg li{
    border: 1px solid #000;
    width: 200px;
    height: 200px;
    text-align: center;
    display: table-cell;
    overflow: hidden;
    vertical-align: middle;
    *float:left;
    *font-family:simsun;
    *font-size:200px;
    *line-height:1;
}
.listImg li img{
    vertical-align:middle;
}
</style>

<ul class="listImg">
    <li>
        <img src="http://gtms04.alicdn.com/tps/i4/T1.PNlFJNdXXbXVSUh-180-130.png" alt="">
    </li>
    <li>
        <img src="http://gtms04.alicdn.com/tps/i4/T1.PNlFJNdXXbXVSUh-180-130.png" alt="">
    </li>
    <li>
        <img src="http://gtms04.alicdn.com/tps/i4/T1.PNlFJNdXXbXVSUh-180-130.png" alt="">
    </li>
</ul>
bubuko.com,布布扣

 

图片垂直居中,布布扣,bubuko.com

图片垂直居中

原文:http://www.cnblogs.com/jseden/p/3673422.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!