图片在已知大小容器中的水平垂直居中实例 - CSS+DIV -

图片在已知大小容器中的水平垂直居中实例

时间:2013-04-11 12:44:56   来源:   评论:加载中...   点击:加载中...
这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:Centering an image of unknown size in an outer container of known size。这个水平和垂直居中的例子能正常工作在IE5....

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“Centering an image of unknown size in an outer container of known size”。

这个水平和垂直居中的例子能正常工作在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="graphics/homework.jpg" alt="" /></span>
  </div>

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

form:http://www.cssplay.co.uk/menu/centered.html



相关热词搜索:

 
上一篇:为不同的浏览器载入不同CSS的二种方法
下一篇:css制作一款相册
收藏 将此文推荐给朋友
分享到: