码迷,mamicode.com
首页 > 其他好文 > 详细

图片垂直居中

时间:2014-09-05 14:19:21      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   ar   art   div   sp   log   

  1. http://blog.csdn.net/dyllove98/article/details/8966910
  2. 1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome
    优点:不添加任何多余标签,兼容主流浏览器
    1. <!--html结构-->
    2. <div class="box-1">
    3. <a class="img-wrap-1" href="#">
    4. <img src="images/1.png" alt="" />
    5. </a>
    6. </div>
    1. /* 样式 */
    2. .box-1{ display:table;}
    3. .img-wrap-1{ display:table-cell; width:200px; height:200px; border:1px solid #ccc; text-align:center; *font-size:178px; zoom:1; vertical-align:middle;}
    4. /* height与font-size之比大约为:1:0.893; zoom:1是为了触发IE的hasLayout */

    2.利用line-height实现居中兼容IE7+/FF/Chrome

    优点:不需要任何hack,兼容IE7+主流浏览器
    缺点:此方法不兼容IE6,当然也可以用方法1中的font-size来兼容IE6
    1. <!--html结构-->
    2. <div class="box-2">
    3. <a class="img-wrap-2" href="#">
    4. <img src="images/1.png" alt="" />
    5. </a>
    6. </div>
    1. /* 样式 */
    2. .img-wrap-2{ display:inline-block; width:200px; height:200px; line-height:200px; border:1px solid #ccc; text-align:center;}
    3. .img-wrap-2 img{ vertical-align:middle;}

    3.利用button标签实现居中兼容IE6+/FF/Chrome

    优点:不需要任何hack,兼容IE6+主流浏览器
    缺点:添加了多余的标签button
     
    1. <!--html结构-->
    2. <div class="box-3">
    3. <a class="img-wrap-3" href="http://baidu.com/" target="_blank">
    4. <button disabled="disabled"><img src="images/1.png" alt="" /></button>
    5. </a>
    6. </div>
    1. /* 样式 */
    2. .box-3{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;}
    3. .img-wrap-3 button{ width:100%; height:100%; border:0; background:none;}
    4. .img-wrap-3 img{ cursor:pointer;}

    4.利用1px小图片实现垂直居中兼容IE6+/FF/Chrome

    优点:不需要任何hack,兼容IE6+主流浏览器
    缺点:添加了多余的标签img
    1. <!--html结构-->
    2. <div class="box-4">
    3. <img class="blank" src="images/blank.gif" alt="" />
    4. <a class="img-wrap-4" href="#" target="_blank">
    5. <img src="images/1.png" alt="" />
    6. </a>
    7. </div>
    1. /* 样式 */
    2. .box-4{ display:inline-block; width:200px; height:200px; border:1px solid #ccc; text-align:center;}
    3. .blank{ width:0px; height:100%; vertical-align:middle;}
    当然,垂直居中的方法不止以上几种,但目前较常用的也就这几个,而且兼容性比较好,后面若发现更好的方法再进行补充

优劣对比:

1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome

优点:不添加任何多余标签,兼容主流浏览器

缺点:需要计算处理font-size

2.利用line-height实现居中兼容IE7+/FF/Chrome

优点:不需要任何hack,兼容IE7+主流浏览器

缺点:此方法不兼容IE6,当然也可以用方法1中的font-size来兼容IE6

3.利用button标签实现居中兼容IE6+/FF/Chrome

优点:不需要任何hack,兼容IE6+主流浏览器

缺点:添加了多余的标签button

4.利用1px小图片实现垂直居中兼容IE6+/FF/Chrome

优点:不需要任何hack,兼容IE6+主流浏览器

缺点:添加了多余的标签img

图片垂直居中

标签:style   blog   http   color   ar   art   div   sp   log   

原文地址:http://www.cnblogs.com/nc-blog/p/3957858.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!