当前位置:  编程技术>WEB前端

转载未知大小的图片在一个已知大小容器中的水平和垂直居中(二)

    来源: 互联网  发布时间:2014-09-06

    本文导语:  这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“Centering an image of unknown size in an outer container of known size”, 作者:Stu Nicholls form:http://www.cssplay.co.uk/menu/centered.html ,发表日期:15th October...

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“Centering an image of unknown size in an outer container of known size”, 作者:Stu Nicholls form:http://www.cssplay.co.uk/menu/centered.html ,发表日期:15th October 2006。

此文由forestgan于2006-10-17翻译发表,更多文章

这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,为IE和非IE分别写了二套简单的样式。

IE使用inline-blocks,非IE使用table-cell and vertical-align。

CSS
/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8; 
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}
xhtml




作者的例子是单个的,我扩展了下,一页6张图片,可适用于像册和产品展示等地方,演示地址


    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • [NEWS][转载]三大Linux近期动向!
  • 转载:一个身先事足的1.4的失败者的自白
  • [转载]Linux基金会董事:不用Linux 你将被淘汰
  • 【转载】鲍尔默想战胜Google应讨教李彦宏
  • 我的Redhat 7.3 Linux汉化/美化方法(转载) iis7站长之家
  • Java狂想曲(转载)
  • 转载-FreeBSD 7.0 发布公告。
  • (转载)为 Linux 应用程序编写 DLL (二)
  • 在RH7.2中装上VIA的AC97的板载声卡 (转载)
  • 我的Redhat 7.3 Linux汉化/美化方法(转载)
  • [转载]linux常见问题
  • 转载] 完全用 GNU/Linux 工作! 摈弃 Windows
  • 『分享』从 2.4 到 2.6:Linux 内核可装载模块机制的改变对设备驱动的影响!!! (转载)
  • 转载:On having layout


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3