设计理念

当前位置:地方网站工作室 >> 网络技术 >> 设计理念 >> 浏览文章

图片垂直居中解决办法

文章来源:菏泽网络公司  文章作者:rainaxin  日期:2009年09月20日
上周做需求,遇到相册中要实现图片垂直居中的问题,记得之前自己遇到过,但是很久没有做忘记了,这次重新温习一遍。其实如果单是针对FF,一个很简单的属性就可以解决,但是问题是我们要考虑ie,没有办法,要针对ie单独的写hack。

上周做需求,遇到相册中要实现图片垂直居中的问题,记得之前自己遇到过,但是很久没有做忘记了,这次重新温习一遍。其实如果单是针对FF,一个很简单的属性就可以解决,但是问题是我们要考虑ie,没有办法,要针对ie单独的写hack。其实结构很简单:

    <div class="img_wrap">
          <img src="images/RED_0099.JPG" alt="桂林" />
    </div>

主要是样式书写,代码如下:

.img_wrap{/*非IE的主流浏览器识别的垂直居中的方法*/
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    *display: block;
    *font-size: 131px;/*约为高度的0.873,150*0.873 约为131*/
    width:150px;
    height:150px;
    border: 1px solid #ccc;}
.img_wrap img{vertical-align:middle;}

显示效果如下:

点击浏览下一页

但是如果给img外边的标签添加一个属性就会使得在ff下面失效。图片在ff下面就不会垂直居中显示:

点击浏览下一页

这个干扰属性就是浮动,上面的效果就是给img外边的div添加了以float:left属性,所以大家如果利用相同的办法不能使得图片垂直居中,可以查找下是不是利用了浮动。

当然这个只是其中的一个办法,还有其他的方法,大家可以继续进行探讨。

原文地址:http://www.rainaxin.com/2008/12/css-vertical-centering-images-part1/

追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇:20个大师级的简洁版的logo设计实例
下一篇:制作网页的5条非常不错的建议
相关文章

我们能为菏泽企业做什么?

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务!
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER,全面的SEO推广方案,为您量身定制SEO网站推广策划!
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机!
《书生商友》商机群发软件
Booksir,一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们?

手机:18651363941
地址:由于菏泽生存压力巨大,本人现未居菏泽,在北京就值。如有业务需要,请直接电联。
联系人:刘峰 高娜
QQ:61572536
微信:61572536
邮箱:guf521@163.com

服务宗旨

因为执着 所以专业 追求卓越 精心缔造
售后为先 宁得罪新客户  不拖拉老客户
诚信为本 新互顶级域名空间  畅爽速度