快乐重构

Oct

未知尺寸图片的居中-css解决方法
2008-10-13 11:44:42 作者：咿呀咿呀哟

对未知尺寸图片的居中，是经常遇到的一个问题。不过，这里首先声明的是，未知尺寸的图片是指在程序控制了一定大小限制下，尺寸小于当前容器的图片。

目前较为通用的解决方法是利用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>图片居中-by pboliu</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 class="pic_wrap">
<img src="http://v.886.cn/5Zzn/96630143/96630143_14888.jpg" 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方案。

(收藏)

分享至：