经常用的图片在容器中的水平垂直居中实例

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子，原文标题:“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

赞 (0)

相关推荐

  • 经常用的图片在容器中的水平垂直居中实例

    这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:"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 vertic

  • 转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）

    这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:"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翻译发表,更多文章. 这个水平和垂直居中

  • opencv实现图片与视频中人脸检测功能

    opencv实现图片与视频中人脸检测功能

    本文实例为大家分享了opencv实现人脸检测功能的具体代码,供大家参考,具体内容如下 第一章:反思与总结 上一篇博客我相信自己将人脸检测中的AdaBoost算法解释的非常清晰了,以及如何训练人脸检测的强分类器:人脸检测中AdaBoost算法详解.事后,自我感觉对这个人脸检测还是不够具体,所以自己抽了一下午的时间用opencv实现图片与视频中的人脸检测,下面是我用vs2013加opencv4.9来实现的.做一下声明,我的代码是参考OpenCV实现人脸检测的一个博客写的,非常感谢这位博主,我学到了很

  • 详解如何在 docker 容器中捕获信号

    详解如何在 docker 容器中捕获信号

    我们可能都使用过 docker stop 命令来停止正在运行的容器,有时可能会使用 docker kill 命令强行关闭容器或者把某个信号传递给容器中的进程.这些操作的本质都是通过从主机向容器发送信号实现主机与容器中程序的交互.比如我们可以向容器中的应用发送一个重新加载信号,容器中的应用程序在接到信号后执行相应的处理程序完成重新加载配置文件的任务.本文将介绍在 docker 容器中捕获信号的基本知识. 信号(linux) 信号是一种进程间通信的形式.一个信号就是内核发送给进程的一个消息,告诉进程

  • 在Docker容器中使用iptables时的最小权限的开启方法

    在Docker容器中使用iptables时的最小权限的开启方法 Dcoker容器在使用的过程中,有的时候是需要使用在容器中使用iptables进行启动的,默认的docker run时都是以普通方式启动的,没有使用iptables的权限,那么怎样才能在容器中使用iptables呢?要如何开启权限呢? 那么在docker进行run的时候如何将此容器的权限进行配置呢?主要是使用--privileged或--cap-add.--cap-drop来对容器本身的能力的开放或限制.以下将举例来进行说明: 例如

  • php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)

    因有一项目新闻发布系统,数据库内容字段中存储的是原图的路径(当然还有其他文字内容啦,内容里插图时,存的是图片路径),但前台想使用缩略图,琢磨1小时余,得到以下结果,可解决问题(取img标签会了,取别的标签任意属性自然也会了): 复制代码 代码如下: <?php /*正则取图片img标记中的任意属性*/ $word = '<p height="22" align="cenetr">111 22</p> <img src="

  • 浅谈spring容器中bean的初始化

    当我们在spring容器中添加一个bean时,如果没有指明它的scope属性,则默认是singleton,也就是单例的. 例如先声明一个bean: public class People { private String name; private String sex; public String getName() { return name; } public void setName(String name) { this.name = name; } public String get

  • 详解Spring简单容器中的Bean基本加载过程

    详解Spring简单容器中的Bean基本加载过程

    本篇将对定义在 XMl 文件中的 bean,从静态的的定义到变成可以使用的对象的过程,即 bean 的加载和获取的过程进行一个整体的了解,不去深究,点到为止,只求对 Spring IOC 的实现过程有一个整体的感知,具体实现细节留到后面用针对性的篇章进行讲解. 首先我们来引入一个 Spring 入门使用示例,假设我们现在定义了一个类 org.zhenchao.framework.MyBean ,我们希望利用 Spring 来管理类对象,这里我们利用 Spring 经典的 XMl 配置文件形式进行

  • 基于Unity容器中的对象生存期管理分析

    基于Unity容器中的对象生存期管理分析

    IoC容器的对象生存期管理 如果你一直在使用IoC容器,你可能已经使用过了一些对象生存期管理模型(Object Lifetime Management).通过对对象生存期的管理,将使对象的复用成为可能.同时其使容器可以控制如何创建和管理对象实例. Unity提供的对象生存期管理模型是通过从抽象类LifetimeManager的派生类来完成.Unity将为每个类型的注册创建生存期管理器.每当UnityContainer需要创建一个新的对象实例时,将首先检测该对象类型的生存期管理器,是否已有一个对象

  • 基于JS代码实现图片在页面中旋转效果

    1.概述 在一些交易平台网站,如淘宝网.拍拍网等,经常会发现一些图片以圈的形状旋转的效果,如此反复的执行. 2.技术要点 主要应用了Math对象的sin(返回数的正弦值)和cos(返回数的余弦值),通过取得正弦值和余弦值然后加一些算法来改变当前层的位置,使图片在页面中旋转. 3.具体实现 (1)本例利用javaScript的Math对象的正弦和余弦值来改变当前层的位置,代码如下: <script language="javascript"> var x1=200; var

随机推荐