纯css实现小图片在大容器内水平垂直居中resize
纯css实现小图片在大容器内水平垂直居中resize
文章分类:Web前端
Html代码
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Image Resize Demo</title>
<style type=”text/css”>
body{margin:40px;}
img{border:none;}
.rz_img{border:1px solid #ccc;overflow:hidden;margin:20px;float:left;}
.rz_img,.rz_img a{width:140px;height:140px;}
.rz_img a{display:table-cell;text-align:center;vertical-align:middle;background:#ffc;*font:140px Tahoma;*display:block;*white-space:nowrap;}
.rz_img img{margin:0 auto;vertical-align:middle;display:block;*margin-top:-10%;}
</style>
</head>
<body>
<div class=”rz_img”>
<a “#”><span><img src=”http://dl.javaeye.com/upload/attachment/316345/00fd120d-f836-3d25-8bf4-391240cb3c54.jpg” alt=”104×140″ /></span></a>
</div>
<div class=”rz_img”>
<a “#”><span><img src=”http://dl.javaeye.com/upload/attachment/316349/6ccf1ba4-7d6f-34d2-bca2-7883c52fcb0c.jpg” alt=”140×88″ /></span></a>
</div>
<div class=”rz_img”>
<a “#”><span><img src=”http://dl.javaeye.com/upload/attachment/316347/94446187-6110-3162-b1b2-e4e7599b316b.jpg” alt=”40×40″ /></span></a>
</div>
</body>
</html>
原理：
在高级浏览器下（非IE6/7），设置属性display为table-cell，table-cell即可支持垂直居中vertical-align属性。
而针对IE6/7浏览器，设置font-size。因为img和文本可以通过设置img的vertical-align:middle，居中对齐。（原理请参考《HTML权威指南》讲img的章节）因此，设置font-size为容器高度，再通过img的vertical-align属性，即可完成在容器内的垂直居中对齐。
遇到的问题：
字号大小与文本实际高度不同。如例子中设置容器为140×140。font-size:140px的时候，字体实际占用的高度要大于140px。而这个占用高度与字体也有一定关系。。。通过目测，手工测量等不标准的方式，最终我选择了tahoma字体。解决多出的高度部分，通过不精确的测量方式为10% 。。如果只为了简体中文系统用户，可以选择宋体，因为宋体的文字占用高度与字号是完全一致的。
适用情况：
图片尺寸小于容器尺寸，需要做水平&垂直居中。
继续阅读