未知图片宽高的水平垂直居中方法span

mseed · 发表于 2012-4-5 14:46:32

提示：

有兴趣的朋友也可以使用http://www.linxz.de/css_tool/middle_02.html这个图片垂直居中的小工具来实现效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>未知图片宽高的水平垂直居中方法span</title>
<style type="text/css">
.test_box {width:200px;height:200px;overflow:hidden;text-align:center;font-size:0;border:1px solid #000000;}
.test_box .hook {display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;}
.test_box img {vertical-align:middle;border:0 none;}
</style>
</head>
<body>
<div class="test_box">
<span class="hook"></span>
<a href="http://blog.linxz.de/css_book/" target="_blank"><img src="book.jpg" alt="" /></a>
</div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

[教程] 未知图片宽高的水平垂直居中方法span