未知尺寸图片的居中 css解决办法 _HTML/CSS

未知尺寸图片的居中 css解决方法

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

目前较为通用的解决方法是利用display和fontSize的hack，尽量减少了无语义的标签。

上代码：

<html>
<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 class="pic_wrap">
	<img src="http://10.0.3.51:8080/portal-html/images/ipbg.gif" alt="图片" />
</div>
</body>
</html>

?ps:此处除了用到display的hack，主要用到了font-size。关于其值的设置，计算方法是当前容器的高度除以1.14后取整，但根据实际情况，需要在此基础上进行测量，更改为一个恰当的修正值即可。(不要问为什么是这个数，暂时没人解释得清)外面的div容器如果说是多余的无语义标签的话，你可以根据需要替换成a标签：一般的图片都带有链接的。否则，你要再挑剔的话，用js生成外面的这个标签吧。

[转自 :http://www.impng.com/web-dev/unhnow-size-images-middle-by-css.html ]