提示: - ·这种方法是利用了一个空的span标签作为垂直居中的钩子
- ·需要注意的是,如果div标签内的span标签和img标签不在同一行,并且不是紧密写在一起的话,那么就需要在外层的div中添加font-size:0;
- ·添加font-size:0主要是考虑部分浏览器会对换行和空格产生一个“字符”做处理
有兴趣的朋友也可以使用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>
复制代码
|