未知尺寸图片的居中 css解决办法
日期：2014-05-17 浏览次数：20546 次
未知尺寸图片的居中 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 ]
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
