未知尺寸图片的居中 css解决方法
对未知尺寸图片的居中,是经常遇到的一个问题。不过,这里首先声明的是,未知尺寸的图片是指在程序控制了一定大小限制下,尺寸小于当前容器的图片。
目前较为通用的解决方法是利用display和fontSize的hack,尽量减少了无语义的标签。
上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>未知尺寸图片居中 - impng </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html,body,div,img{margin:0;padding:0;font-size:12px;} .pic_wrap{width:150px;height:150px;border:1px solid red;} .pic_wrap{display:table-cell;vertical-align:middle;+display:block;+font-size:139px;text-align: center;}/* fontSize=height\1.14 */ .pic_wrap img{border:1px solid #999;} </style> </head> <body> <div> <img src="http://www.impng.com/images/logo.png" alt="图片" /> </div> </body> </html>
ps:此处除了用到display的hack,主要用到了font-size。关于其值的设置,计算方法是当前容器的高度除以1.14后取整,但根据实际情况,需要在此基础上进行测量,更改为一个恰当的修正值即可。(不要问为什么是这个数,暂时没人解释得清)外面的div容器如果说是多余的无语义标签的话,你可以根据需要替换成a标签:一般的图片都带有链接的。否则,你要再挑剔的话,用js生成外面的这个标签吧。
再ps:感谢老大Dream,在2008年3月份教给了我这个方法,让我在以后的工作中受益。
最后ps:突然想到,每次计算 fontSize和修正值过于繁琐,何不通过js帮助?当然这必须要求fontSize和height之间有一个稳定的计算公式。由js取得当前容器的高 度,通过计算公式后给当前容器增加fontSize属性。但是,既然这样了,何不全部采用js实现?呵,所以目前还是使用css方案。