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

问题

  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无效。

时间: 2024-11-15 12:22:04

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

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

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

转载未知大小的图片在一个已知大小容器中的水平和垂直居中(二)_经验交流

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

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

android怎么从服务器的一个存放图片的文件夹中下载其中所有的图片,已知文件夹的url

问题描述 android怎么从服务器的一个存放图片的文件夹中下载其中所有的图片,已知文件夹的url android怎么从服务器的一个存放图片的文件夹中下载其中所有的图片,已知文件夹的url 解决方案 只要这个url和图片信息(比如名字)能组成有效的url就行了,然后再返回一个图片的名字列表,遍历下载就行了 解决方案二: QT下实现将图片从一个文件拷贝到另一个文件夹把存储在数据库的图片导入到一个文件夹 解决方案三: 考慮安裝一下 ""抓圖神器"" 這個APP應該就可以

gdi-MFC显示图片问题,图片的路径在容器中

问题描述 MFC显示图片问题,图片的路径在容器中 小弟初学MFC,现在要用GDI+实现在MFC窗口显示图片功能,图片的路径是压在容器里面的,不知如何用GDI+显示容器里面的图片...急 解决方案 直接从容器中获得路径,然后用gdi+绘图. 解决方案二: 容器是什么,拿出路径就可以传给gdi+ 解决方案三: 因为是先浏览文件夹的,我把路径保存在容器里面了. 解决方案四: pDC =GetDC();//根据情况,基本文档和基于对话框的还不一样Graphics graphics( pDC->m_hDC

各位大神,已知三维空间中物体A,B坐标,物体B一直正面朝向物体A,怎么求B的旋转轴向?

问题描述 各位大神,已知三维空间中物体A,B坐标,A物体位置可变,物体B一直正面朝向物体A,怎么求B的旋转轴向? 解决方案 解决方案二:求大神解答!解决方案三:旋转轴到底是哪根轴?

c#如何读某一特定格式的图片。已知图片是用vb写软件做的。自己定义的后缀格式。

问题描述 如题 解决方案 解决方案二:难度比较大啊.如何读二进制的文件信息解决方案三:先读取文件的后缀名,判断后缀名.....解决方案四:读取文件头然后判断System.IO.FileStreamfs=newSystem.IO.FileStream(hifile.PostedFile.FileName,System.IO.FileMode.Open,System.IO.FileAccess.Read);System.IO.BinaryReaderr=newSystem.IO.BinaryRead

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

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

WCF技术剖析之十三:序列化过程中的已知类型(Known Type)

DataContractSerializer承载着所有数据契约对象的序列化和反序列化操作.在上面一篇文章(<数据契约(Data Contract)和数据契约序列化器(DataContractSerializer)>)中,我们谈到DataContractSerializer基本的序列化规则:如何控制DataContractSerializer序列化或者反序列化对象的数量:以及如何在序列化后的XML中保存被序列化对象的对象引用结构.在这篇文章中,我们会详细讨论WCF序列化中一个重要的话题:已知类型