转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）
发布时间：2020-03-15 06:12:44 所属栏目：Linux 来源：站长网
导读：转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）
|
这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题：“Centering an image of unknown size in an outer container of known size”， 作者：Stu Nicholls form： ，发表日期：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> <span></span> <span><img src="http://www.jb51.net/article/graphics/homework.jpg" alt="" /></span> </div> 作者的例子是单个的，我扩展了下，一页6张图片，可适用于像册和产品展示等地方，演示地址。 （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
