DDR爱好者之家

转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）
站长资源 2024/11/20 佚名
22 1538
DDR爱好者之家 Design By 杰米

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题：“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;}
}
<!--[if IE]>
<style type="text/css">
/* vertical align for IE */
#edge {width:0; height:100%; display:inline-block; vertical-align:middle;} 
#container {text-align:center; width:100%; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->

xhtml

<div class="holder">
<span id="edge"></span> 
<span id="container"><img src="/UploadFiles/2021-04-02/homework.jpg"></div>

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米