DIV中图片垂直居中
2012-11-20 17:01
274 查看
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>img垂直居中</title>
<!--[if IE 6]>
<script type="text/javascript" src="http://www.doyo.cn/Tpl/web/Public/js/DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix(".png_cover");
</script>
<![endif]-->
<style type="text/css">
.imgkuang{position:relative;width:310px;height:310px;border:1px solid #ccc;}
.imgkuang span{width:310px;height:310px;display:table-cell;vertical-align:middle;text-align:center;line-height:310px;*display:block;*font-size:280px;*font-family:Arial;}
.imgkuang img{vertical-align:middle;}/*IE6*/
.imgkuang span .png_cover{position:absolute;top:-2px;right:-2px;}
</style>
</head>
<body>
<div class="imgkuang">
<span><a href=""><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" border="1" /></a><img src="http://www.doyo.cn/Tpl/web/Public/images/cover_language_cn.png" class="png_cover" /></span>
</div>
</body>
</html>
参考：http://wenku.baidu.com/view/114a4d92daef5ef7ba0d3cbf.html
IE6 Png图片透明js源码：DD_belatedPNG.js
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>img垂直居中</title>
<!--[if IE 6]>
<script type="text/javascript" src="http://www.doyo.cn/Tpl/web/Public/js/DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix(".png_cover");
</script>
<![endif]-->
<style type="text/css">
.imgkuang{position:relative;width:310px;height:310px;border:1px solid #ccc;}
.imgkuang span{width:310px;height:310px;display:table-cell;vertical-align:middle;text-align:center;line-height:310px;*display:block;*font-size:280px;*font-family:Arial;}
.imgkuang img{vertical-align:middle;}/*IE6*/
.imgkuang span .png_cover{position:absolute;top:-2px;right:-2px;}
</style>
</head>
<body>
<div class="imgkuang">
<span><a href=""><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" border="1" /></a><img src="http://www.doyo.cn/Tpl/web/Public/images/cover_language_cn.png" class="png_cover" /></span>
</div>
</body>
</html>
参考：http://wenku.baidu.com/view/114a4d92daef5ef7ba0d3cbf.html
IE6 Png图片透明js源码：DD_belatedPNG.js
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 图片水平垂直居中于DIV（图片未知宽高）
- 图片在div中垂直居中的css
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
- div内图片和文字水平垂直居中
- 完美DIV、图片水平垂直居中
- div图片垂直居中 如何使div中图片垂直居中
- 浮动div中的图片垂直居中
- div里面图片垂直居中的几个例子
- div中使图片垂直居中
- 图片在div中垂直方向居中，垂直居中
- Div垂直居中及容器内图片垂直居中的CSS解决方法
- 设置DIV内图片垂直居中
- div中图片水平垂直居中
- 让文本或图片在div容器中垂直居中
- CSS实现图片水平垂直居中于DIV
- div的内容图片垂直居中代码（兼容多浏览器）
- Div垂直居中及容器内图片垂直居中的CSS解决方法
- 假如有一个固定高度的div，如何让里面的一个图片垂直居中？
- DIV 多行文字或图片垂直居中 FF/ IE 6,7,8