Maison > interface Web > tutoriel HTML > DIV中图片垂直居中的css样式_html/css_WEB-ITnose

DIV中图片垂直居中的css样式_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:28:03
original
1181 Les gens l'ont consulté

众所周知,图片的水平居中比较简单,但是图片的垂直居中比较麻烦一些,今天查阅了资料并自己写了测试代码,来实现兼容IE,FF,chrome等主流浏览器的图片在div中的垂直居中的方法。

css样式代码如下:

        

然后html代码如下:

图片在div中正常显示,例子中div的尺寸均为210px*210px,图片为210px*158px h3 >
         这里为了专门验证DIV中的图片垂直居中,特地将DIV的宽度设置成同图片宽度一样;图片的水平居中较简单,可以设置div{text-align:center} p >
        
            
         div >
         图片在div中居中显示,设置div{display:table-cell;vertical-align:center} div img {vertical:middle} h3 >
         在IE8,chrome18,firefox12下测试通过,IE6/7均不通过 p >
        
            
         div >
         图片在div中居中显示,设置IE hack,加上一句 *font-size:183px来hack h3 >
         183 = 210*0.875,为什么乘这个0.875,原理不知,有待补充,目前由前人经验得来。IE6/7也能通过。 p >
        
              

 

       

有问题可以给我留言! 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal