首页 > 代码库 > CSS图片垂直居中方法整理集合
CSS图片垂直居中方法整理集合
原帖链接：http://bbs.blueidea.com/thread-2666987-1-1.html
1、因为Opera，FF3，IE8均支持display:talbe;这些特性了，因此改进的办法是：
<!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>利用定位来显示垂直局中的图片</title><style type="text/css">.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}.miao span img{border:dashed 1px green;}</style><!--[if lte IE 7]><style type="text/css">.miao{position:relative;overflow:hidden;}.miao span{position:absolute;left:50%;top:50%;}.miao span img{position:relative;left:-50%;top:-50%;}</style><![endif]--></head><body><h1>固定高宽的容器中，图片垂直局中。</h1><p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p><div class="miao"> <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span></div><hr /><div class="miao" style="width:300px;height:80px;"> <span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span></div><hr /><div class="miao" style="width:500px;height:220px;"> <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span></div></body></html>
2、display:inline-block 方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><style type="text/css">div { display:table-cell; height:300px; width:500px; text-align:center; border:1px solid #000; vertical-align:middle }</style><!--[if IE]><style type="text/css">i { display:inline-block; height:100%; vertical-align:middle }img { vertical-align:middle }</style><![endif]--><div><i></i> <img src="http://www.baidu.com/img/logo.gif" /></div>
CSS图片垂直居中方法整理集合
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。