手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >经常用的图片在容器中的水平垂直居中实例
经常用的图片在容器中的水平垂直居中实例
摘要:这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“Centeringanimageofunknownsizein...

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:“Centeringanimageofunknownsizeinanoutercontainerofknownsize”。

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

IE使用inline-blocks,非IE使用table-cellandvertical-align。

CSS代码:

以下是引用片段:

/*fornon-IEbrowsers*/

div.holder{width:750px;height:300px;background:#f8f8f8;

border:1pxsolid#777;text-align:center;display:table-cell;vertical-align:middle;}

}

<>

xhtml代码:

<divclass="holder">

<spanid="edge"></span>

<spanid="container"><imgsrc="graphics/homework.jpg"alt=""/></span>

</div>

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

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

【经常用的图片在容器中的水平垂直居中实例】相关文章:

js兼容火狐获取图片宽和高的方法

javascript实现可拖动变色并关闭层窗口实例

对textarea框的代码调试,而且功能上使用非常方便,酷

自适应图片大小的弹出窗口

Javascript实现图片轮播效果(二)图片序列节点的控制实现

深入理解JavaScript的React框架的原理

javascript小技巧 超强推荐第1/5页

JavaScript实现的MD5算法完整实例

jquery实现图片左右切换的方法

javascript瀑布流式图片懒加载实例

精品推荐
分类导航