繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）
- CSS样式表
- CSS 关于网页图片的属性
- CODEPAGE 列表与asp应用例子
- html 的 ContentType 小结
- 不要使用CSS Expression的原因分析
- css ie6 ie7 ff的CSS hack使用技巧
- div+CSS网页布局的意义与副作用原因小结
- iframe自适应高度的多种方法方法小结
- css display:none使用注意事项小结
- html工作中表格<tbody>标签的使用技巧
- input为disabled提交后得不到该值的解决方法
- Css Reset(复位)方法整理
- css首字放大实例代码
- 让IE ff Opera同时支持Alpha透明的方法
- WEB标准网页布局中尽量不要使用的HTML标签
- css网页布局中注意的几个问题小结
- 指定网页的doctype解决CSS Hacking方法总结
- 左侧固定宽度，右侧自适应宽度的CSS布局
- DIV+CSS经常用到的属性、参数及说明
- 校内网css代码添加背景图片常用代码
- css 通配符用法总结
CSS样式表 中的 转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 144 ::
收藏到网摘: n/a
这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题：“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="graphics/homework.jpg" alt="" /></span>
</div>
作者的例子是单个的，我扩展了下，一页6张图片，可适用于像册和产品展示等地方，演示地址。
评论 (0) All
