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

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)

相关推荐

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

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

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

    除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果. 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翻译发表,更多文章. 这个水平和垂直居中

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

    这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:"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实现对任意大小图片均匀切割的示例

    改代码是在windows 系统下 打开路径和保存路径换成自己的就可以啦~ import numpy as np import matplotlib import os def img_seg(dir): files = os.listdir(dir) for file in files: a, b = os.path.splitext(file) img = Image.open(os.path.join(dir + "\\" + file)) hight, width = img.s

  • python随机在一张图像上截取任意大小图片的方法

    如下所示: ''' 机器学习中随机产生负样本的 ''' import cv2 import random #读取图片 img=cv2.imread('1.png') #h.w为想要截取的图片大小 h=80 w=80 count=1 while 1:     #随机产生x,y 此为像素内范围产生  y = random.randint(1, 890) x = random.randint(1, 1480) #随机截图  cropImg = img[(y):(y + h), (x):(x + w)]

  • TensorFLow 不同大小图片的TFrecords存取实例

    全部存入一个TFrecords文件,然后读取并显示第一张. 不多写了,直接贴代码. from PIL import Image import numpy as np import matplotlib.pyplot as plt import tensorflow as tf IMAGE_PATH = 'test/' tfrecord_file = IMAGE_PATH + 'test.tfrecord' writer = tf.python_io.TFRecordWriter(tfrecord

  • jQuery下通过replace字符串替换实现大小图片切换

    核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换. 下面这个动画就是显示了尺寸切换,单击"大图"按钮,则改变图片的src,加载大图,单击"小图"按钮,则又显示小图. replace用法简单讲解: 我其实也是新手,讲得不对望海涵. 字符串.replace(a,b);指的是用b将字符串含有a的部分代替,例如字符串obj="welcome to my website!"; obj.replace("my&qu

  • 无间断滚动的新闻文章列表 多浏览器兼容

    Fifty Studio│无间断滚动的新闻文章列表 @import url("/tutorials/demo/css/ie.css"); #demo{overflow:auto; } } CSS 布局演示 CSS Layout by Forestgan 2006-11-1 发表 三列自适应宽度液态布局│Three Column Liquid Layouts Internet Explorer 7 对CSS的兼容--Box Model Changes 未知大小的图片在一个已知大小容器中的

  • 无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee

    <!--Quirks Mode--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

随机推荐