用css控制div中的图片垂直居中

最近在改主题的过程中,发现让一个div中的图片垂直居中并且兼容各种浏览器还真是一个不容易的事情。试了试去,找来找去,在网上也还真发现了不少方法。

有的把用display:table-cell,和vertical-align:middle的方法,有人用把font-size设置成很大。这些方法都有一些问题,就是兼容性可能不太好,特别是在IE系列中的浏览器中。说句题外话,我真的不想用IE或者IE内核的浏览器了。

不过我真是找到一个不错的方法,而且比较简单,奇怪的就是这种方法在网上流传和还真是不广,其它的几种方法铺天盖地的都是,这个方法我就在两个地方看到过。

这个方法的原理就是在图片后面接一个span或者p元素,然后把height设置为div高度,这样前面的图片就会居中。

HTML代码如下。<img>和后面的<span>之间没有空格,没有换行,紧跟着。

;

css如下

.outer{  width:500px;
         height:500px;
         vertical-align:middle;
       }
.v-align{display:inline-block; 
         height:100%; 
         width:0px; 
         vertical-align:middle;
       }
.img{  vertical-align:middle;
      }

这个方法很简单,兼容性也还可以。

[suffusion-widgets id=”1″]



wangfeng

从事医药研发工作,向往IT技术,喜欢折腾网站。

  1. Pingback: hector

  2. Pingback: Tracy

  3. Pingback: jackie

  4. Pingback: ronald

  5. Pingback: alex

  6. Pingback: Juan

  7. Pingback: Russell

  8. Pingback: benjamin

  9. Pingback: Jeffery

  10. Pingback: Jason

  11. Pingback: Jesus

  12. Pingback: otis

  13. Pingback: ernest

  14. Pingback: nathaniel

  15. Pingback: dwight

  16. Pingback: Paul

  17. Pingback: Marc

  18. Pingback: austin

  19. Pingback: jacob

  20. Pingback: Jonathan

  21. Pingback: Michael

  22. 莫名其妙的来到了一片新天地,没搞懂是做什么的,也不知道这是什么网页,感觉很新鲜,还有我对代码是一窍不通,你们都是搞编码的吗?待会好好看看这个网站是什么?