网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

图片垂直居中的使用技巧(转载)

日期:2013-12-09  来源:攀枝花惠康网络公司

转载自己http://www.planabc.net/2008/05/26/img_vertical_center_solution/

123456789101112131415161718192021 .box {/*非IE的主流浏览器识此外垂直居中的体例*/display: table-cell;vertical-align:middle;/*设置水平居中*/text-align:center;/* 针对IE的Hack */*display: block;*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/*font-family:Arial;/*防止非utf-8引起的hack失踪效问题,如gbk编码*/width:200px;height:200px;border: 1px solid #eee;}.box img {/*设置图片垂直居中*/vertical-align:middle;}<div class="box"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /></div>

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水安然安祥垂直居中。”

当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常碰着的一个问题,很有代表性。

至于若何解决,下面是一个权衡的相对结构清洁,CSS简单的解决体例:

问题问题的可贵在于两点:

  1. 垂直居中;
  2. 图片是个置换元素,有些非凡的特征。

当然还有其他的解决体例,在此不深究,有乐趣的可以阅读下:

  • 《Vertical centering using CSS》
  • 《Vertical centering using CSS》(问题和上同,内容分歧)
  • 《CSS List Grid Layout》

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受用户好评。

客服热线:tel(谢先生)  客服QQ:1323605005  
服务邮箱:yewubu@huikon.com(售前咨询)  jishubu@huikon.com(技术部)  shouhou@huikon.com(售后服务)
公司地址:四川省攀枝花市
邮编:617200