针对不同浏览器的解决办法： 1、针对IE7，我们将行距，高度保持一致，既可以解决垂直居中的问题。 2、针对非IE浏览器，我们可以将img的父级元素的display设置为table-cell，让他已“td”的形态出现，然后使用vertical-align:middle;使图片垂直居中。 3、针对IE6及以下的浏览器，设置一个font-size,然后给图片加上vertical-align:middle ，为什么要设置一个font-size呢？网上说“高度/字体大小的比值为1.14左右时IE可实现垂直居中。”。 综合以上问题，我们可以将源代码改成这样： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- .box { width:200px; height:200px;/*height如要改变不需在一下属性之前，否则图片不会垂直居中*/ line-height:200px; font:175px Arial; text-align:center; display:table-cell; vertical-align:middle; overflow:hidden; background:#eeeeee; } .box img {vertical-align:middle;} --> </style> </head> <body> <div class="box"><img src="http://www.baidu.com/img/baidu.gif" /></div> </body> </html>
989
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
