作家
登录

CSS图片垂直居中实现方法详解

作者: 来源:www.28hudong.com 2012-11-19 17:37:53 阅读 我要评论

方法一:利用定位 HTML结构如: 复制代码代码如下: <div class="box"> <a class="pic-wrap" href="#" target="_blank"> <img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png"> </a> </div> CSS代码如: 复制代码代码如下: body { margin: 0; padding: 0; font: 12px/1.5 tahoma,arial; } .box { width: 220px; height: 220px; border: 1px solid #F30; margin: 100px auto 0; display: table; } .pic-wrap { display: table-cell; text-align: center; vertical-align: middle; } /*主要针对IE6、7的hack*/ .box { *position: relative; } .pic-wrap { *width: 100%; *position: absolute; *top: 50%; *left: 0; /*继承自body的字体会影响到ie6,设置默认的windows系统字体*/ _font-family: sans-serif; } .pic-wrap img { *position: relative; *top: -50%; *left: 0; /*在ie中空文本节点有默认高度*/ vertical-align: middle9; /*在ie中,a标签中的img标签默认有蓝色边框*/ border: none9; } 方法二: HTML结构同上; CSS代码如: 复制代码代码如下: .box { width: 220px; height: 220px; border: 1px solid #F30; margin: 100px auto 0; } .pic-wrap { display: table-cell; vertical-align: middle; width: 220px; height: 220px; text-align: center; /*ie6、7不支持display:table-cell*/ *display: block; *font-size: 192px; /*字体大小为height*0.783或者height/1.14,这里约为192px*/ _font-family: sans-serif; /*设置字体,否则在ie6下会有一个像素的偏差*/ } .pic-wrap img { border: none; vertical-align: middle; /*由于ie下空文本节点有默认高度,所以设置*/ } 【注意,当在css中设置了body元素字体的话,那么方法二在ie7下会失效的】 最佳方法: CSS代码如: 复制代码代码如下: body { margin: 0; padding: 0; <SPAN style="COLOR: #ff6600">font: 12px/1.5 tahoma,arial;</SPAN> } .box { width: 220px; height: 220px; border: 1px solid #F30; margin: 100px auto 0; } .pic-wrap { display: table-cell; vertical-align: middle; width: 220px; height: 220px; text-align: center; /*ie6、7不支持display:table-cell*/ *display: block; _font-size: 192px; <SPAN style="COLOR: #ff6600">+line-height: 220px; /*设置ie7中空文本节点行高为220px*/</SPAN> _font-family: sans-serif; } .pic-wrap img { border: none; vertical-align: middle9; /*由于ie中有默认高度的空文本节点*/ }

  推荐阅读

  对网页中层的固定实现代码

对于DIV+CSS不熟悉的我,为此加班加点在项目上线时把问题解决了。参考代码如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1>>>详细阅读


本文标题:CSS图片垂直居中实现方法详解

地址:http://www.17bianji.com/kaifa2/CSS/16511.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)