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

除特别说明外，本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果。

CSS布局中,未知大小图片的垂直居中，一直是比较头疼的问题,标准浏览器只要设定容器的line-height和图片的vertical-align:middle;就可以了，但对IE没用，几个月前在国外网站看到了一则对IE的解决方法，感觉不是很理想，也没当回事。最近看到经常有朋友在问类似的问题，又把代码翻了出来，针对IE改了下。

CSS

.box{
  height:140px;
  width:200px;
  border: solid 1px #666;
  text-align:center;/*水平居中*/
  line-height:140px;
  font-size:126px;/*IE靠这垂直居中*/  
 }
 .box[class]{
  font-size:12px;/*标准浏览器需要这个数值*/
 }
 img{
  vertical-align:middle;/*标准浏览器图片垂直居中*/
 }

原先老外代码的font-size是和高度相同，试下来容器的高度要比标准浏览器高一截，多次尝试将字体尺寸大小减去了百分之十容器的高度,这样一来，看起来差不多。至于什么原因还不清楚.

在IE5.5、IE6.0、FF1.5、Opera9.0下测试成功,对IE5.0和IE7.0无效.

赞 (0)

相关推荐

  • iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐

    iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐

    UIEdgeInsets typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets; 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets.titleEdgeInsets

  • 用css实现图片垂直居中的使用技巧

    题目的难点在于两点: 垂直居中: 图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为

  • JS实现图片垂直居中显示小结

    第1种,居中效果 <div class="box"> <div class="center">居中效果</div> </div> /*第1种,垂直居中效果*/ .box{ width: 200px;height: 200px;border: 1px solid #ccc; position: relative; } .center{ width: 100px;height: 100px;background: gray

  • CSS图片响应式 垂直水平居中

    CSS图片响应式 垂直水平居中

    我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

  • 文字或图片元素在DIV中垂直居中

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

  • js+CSS 图片等比缩小并垂直居中实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript图片自动缩放和垂直居中处理函数

    javascript图片自动缩放和垂直居中处理函数

    复制代码 代码如下: <html> <head> <title>Untitled</title> <style type="text/css"> .testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;} .testCss1{width:300px;height:300px;border:1px red sol

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

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

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

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

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

    CSS布局中,未知大小图片的垂直居中,一直是比较头疼的问题,标准浏览器只要设定容器的line-height和图片的vertical-align:middle;就可以了,但对IE没用,几个月前在国外网站看到了一则对IE的解决方法,感觉不是很理想,也没当回事.最近看到经常有朋友在问类似的问题,又把代码翻了出来,针对IE改了下. CSS .box{height:140px;width:200px;border: solid 1px #666;text-align:center;/*水平居中*/line

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

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

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

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

  • 修改已有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/ 需要注意的是,不管容器有没有启动,拷贝命令都会生效. 当结束后,

  • 如何隔离docker容器中的用户的方法

    笔者在前文<理解 docker 容器中的 uid 和 gid>介绍了 docker 容器中的用户与宿主机上用户的关系,得出的结论是:docker 默认没有隔离宿主机用户和容器中的用户.如果你已经了解了 Linux 的 user namespace 技术(参考<Linux Namespace : User>),那么自然会问:docker 为什么不利用 Linux user namespace 实现用户的隔离呢?事实上,docker 已经实现了相关的功能,只是默认没有启用而已.笔者将在

  • java去除已排序数组中的重复元素

    java去除已排序数组中的重复元素

    题目描述 给定一个已排序的数组,去除数组中的重复元素,只保留一个重复的元素,并且返回新的数组长度. 要求: 不要给数组分配额外的空间,你必须使用常量的内存大小进行原地操作. 例如: 给出数组A=[1,1,2],你的函数调用之后必须返回长度length=2,并且A现在变成[1,2]. 输入 一个已排序的数组,例如[1,1,2]. 输出 返回数组新的长度,例如length=2. 快慢指针法 设置fast指针遍历数组,slow指针指向不重复元素的下一位. public static int remov

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

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

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

  • docker容器中crontab无法正常运行解决方案

    相信很多人看完docker容器, 需要加crontab, 加完却发现不能执行,心塞.....接着便开始各种折腾... 首先当然是看日志了, 发现/var/log 下面没有任何信息, 那是因为你没有打开rsyslog. # /etc/init.d/rsyslog start 继续看日志 # tail /var/log/crond Dec 29 16:39:01 web01-50794 crond[2839]: (root) FAILED to open PAM security session (

随机推荐