首页 > 代码库 > 网页中图片的垂直居中对齐

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

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

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