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

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

相关推荐

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

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

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

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

  • 修改已有docker容器中的内容方法

    一.docker ps    列出容器 二.docker cp   拷贝文件至容器 注:docker中宿主机与容器(container)互相拷贝传递文件的方法 1.从容器拷贝文件到宿主机 docker cp mycontainer:/opt/testnew/file.txt /opt/test/ 2.从宿主机拷贝文件到容器 docker cp /opt/test/file.txt mycontainer:/opt/testnew/ 需要注意的是,不管容器有没有启动,拷贝命令都会生效. 当结束后,

  • 未知大小图片在已知容器中的垂直和水平居中问题

    除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果. CSS布局中,未知大小图片的垂直居中,一直是比较头疼的问题,标准浏览器只要设定容器的line-height和图片的vertical-align:middle;就可以了,但对IE没用,几个月前在国外网站看到了一则对IE的解决方法,感觉不是很理想,也没当回事.最近看到经常有朋友在问类似的问题,又把代码翻了出来,针对IE改了下. CSS .box{  height:140px;  width:200px;  border: so

  • python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配

    已知一个元素,在一个list中找出相似的元素 使用场景: 已知一个其它来源的字符串, 它有可能是不完全与我数据库中相应的字符串匹配的,因此,我需要将其转为适合我数据库中的字符串 使用场景太绕了, 直接举例来说吧 随便举例: 按青岛城市的城区来说, 我数据库中存储的城区是个list:['市北区', '市南区', '莱州市', '四方区']等 从其它的数据来源得到一个城区是:市北 我怎么得到与市北相似相近的市北区 解决方案: In [1]: import difflib In [2]: cityar

  • javascript实现获取图片大小及图片等比缩放的方法

    本文实例讲述了javascript实现获取图片大小及图片等比缩放的方法.分享给大家供大家参考,具体如下: 获取图片大小: var originImage = new Image(); function GetImageWidth(oImage) { if (originImage.src != oImage.src) originImage.src = oImage.src; return originImage.width; } function GetImageHeight(oImage)

  • PHP动态生成指定大小随机图片的方法

    本文实例讲述了PHP动态生成指定大小随机图片的方法.分享给大家供大家参考,具体如下: <?php $image_width = 100; $image_height = 100; $image_str = ''; if (isset($_GET['w'])) { $image_width = intval($_GET['w']); } if (isset($_GET['h'])) { $image_height = intval($_GET['h']); } if (isset($_GET['s

  • 利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例

    利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例

    前言 最近的一个项目中需要在图片上添加文字,使用了OpenCV,结果发现利用opencv给图像添加文字有局限.可利用的字体类型比较少,需要安装Freetype扩展,比较复杂.而且不能用putText函数输出中文,否则就会出现乱码的情况.只好选择使用Python PIL函数库对照片进行处理,利用Python自带的PIL库扩展图片大小给图片加上文字描述,大多都是库函数调用,只是给定图片宽度后计算文字所需行数的代码需要写. 代码比较丑,but it works. 代码示例 #!/usr/bin/env

  • android图像绘制(五)画布保存为指定格式/大小的图片

    将图片进行编辑(放缩,涂鸦等),最后保存成指定格式.大小的图片. 先贴代码: 复制代码 代码如下: Bitmap bmp = Bitmap.createBitmap(480, 800, Config.ARGB_8888); Canvas canvas = new Canvas(bmp); canvas.drawBitmap(this.bmp, matrix, paint); canvas.save(Canvas.ALL_SAVE_FLAG); canvas.restore(); File fil

  • javascript 动态设置已知select的option的value值的代码

    复制代码 代码如下: funtion setSelectOption(a,b){//a =>select 的id名,b=>已知option的值 for (i=0;i<$(a).length;i++) //$(a)获取a的id的简单写法,前提是必须用引用prototype.js if($(a).options[i].value == b){//遍历select $(a).options[i].selected=true;//选中特定值 break; }

随机推荐