码迷,mamicode.com
首页 > Web开发 > 详细

网页中图片的垂直居中对齐

时间:2014-07-16 19:55:26      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:style   使用   width   问题   line   c   

相信很多前端开发人员都曾遇到过需要将图片设置为垂直居中对齐的经历,我刚好在之前的一个项目刚刚解决了这个问题,使用的方法非常简单,兼容性也很好。具体做法如下:

1、只需要兼容各大现代浏览器:

父元素{
  display:teble-cell;

  width:Npx;

  height:Npx;

  vertical-align:middle;
}

2、如果要兼容IE7以前的低版本IE浏览器:

  父元素{
    display:teble-cell;

    width:Npx;

    height:Npx;

    vertical-align:middle;

    *font-size:1px;

    *line-height:Npx;  /*此处的数值必须与高度相等*/
  }

 

网页中图片的垂直居中对齐,布布扣,bubuko.com

网页中图片的垂直居中对齐

标签:style   使用   width   问题   line   c   

原文地址:http://www.cnblogs.com/cicichan/p/3837224.html

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