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

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

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

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

上一篇:39个让你受益的HTML5教程


下一篇:比较好用的 jQuery代码