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

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;  /*此处的数值必须与高度相等*/
  }

 

posted on 2014-07-11 10:44  陈小溪  阅读(1008)  评论(0编辑  收藏  举报