一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

三款css div 图片垂直居中代码

时间:2010-10-17 编辑:简简单单 来源:一聚教程网

 代码如下 复制代码

cssbox{
 /* 非ie内核浏览器识别垂直居中 */
 display:table-cell;
 vertical-align:middle;
 /* ie内核浏览器识别垂直居中 */
 *display:block;
 /* 约为高度的0.873,200*0.873 约为175 */
 *font-size:175px;
 text-align:center;
 width:200px;
 height:200px;
}
.cssbox img{
 vertical-align:middle;
}

方法二

 代码如下 复制代码





www.111com.net





方法三

 代码如下 复制代码





div+css图片垂直居中




 


1.该方法实现的垂直居中效果必须在严格模式(dtd xhtml 1.0 strict)下才能生效.

    2.对于标准浏览器(ff,opera,chrome,ie8…)而言.imgbox img{ vertical-align:middle;}就可以实现图片垂直居中.

    3.对于ie7,我们可以用line-来达到目的.

    4.剩下的ie6是用*html .imgbox{ font-size:360px; font-family:arial;}来实现的.其中360=400*90%得来的,400为容器的高度,用90%是因为容易记,其精确值为0.873.至于这个数值怎么来的没有具体研究…


方法三

 代码如下 复制代码






 

 

热门栏目