当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS实例:图片水平垂直居中于DIV(图片宽高未知)

时间:2013-03-02 03:45来源:未知 作者:admin 点击:

标签:CSS实例:图片水平垂直居中于DIV(图片宽高未知) 图片(50)d(3)水平(12)div(47)居中(19)宽高(1)垂直(12)未知(1)CSS(655)实例(55)
div class=demoa href=#img src=images/01.jpg //a/div 这是限度IE6下图片的最大宽和最大高,就像非IE6下的: 再看看代码, CSS实例: nth-child和 nth-type-of的区别 ,重要2局部: /*For Firefox Chrome*/ .demo{border:1px #ddd solid;width:208px;height:
CSS实例:图片水平垂直居中于DIV(图片宽高未知)》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333352013.htm

<div class=”demo”><a href=“#”><img src=“images/01.jpg” /></a></div>

这是限度IE6下图片的最大宽和最大高,就像非IE6下的:

再看看代码,CSS实例: nth-child和 nth-type-of的区别,重要2局部:

/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:208px;height:148px,CSS实例教程: nth-child和 nth-type-of的区别;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
,CSS实例教程 制作网页特殊产品列表.demo a{display:table-cell,CSS实例教程 分号引起页面混乱;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px,CSS实例 网页背景渐变;max-height:140px;}
/*For IE7*/
*+html .demo a{position:absolute;top:50%;width:100%,CSS实例 网页布局中的图文列表;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
/*For IE6*/
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto,CSS实例 定位(position)页面定位详解;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?“200px”:“atuo”);height:expression(this.height>140?“140px”:“atuo”),CSS定义的下拉菜单代码;}

width:expression(this.width>200?“200px”:“atuo”);height:expression(this.height>140,CSS学习教程 学习CSS的宽度width?“140px”:“atuo”);

HTML代码:

max-width:200px;max-height:140px;

是一个情理。

其余也没什么要过多说明的了,你懂的,CSS字体:详解font属性!假如你对部门CSS不太懂的话,请参本站的的CSS一栏,或者前往w3school。

其中For IE6中的css有这么一段:

PS:你可以用Firebug或者任意阅读器的开发职员工具修正图片尺寸测试效果。

--> [网站建设之]CSS实例:图片水平垂直居中于DIV(图片宽高未知)

如何实现一张宽高未知的图片在一个Div里面水平垂直居中呢?信任良多人首先想的是Table布局,是的,实现起来不是很麻烦,但确定也有一些有代码洁癖的人。本文疏忽Table的实现方式,有兴致的也能够去研讨一下。下面先容下用Html跟CSS来实现如题后果。 Tag:DIV   程度居中   CSS   DIV   水平居中   CSS  

CSS代码:


(责任编辑:网站建设)
CSS实例:图片水平垂直居中于DIV(图片宽高未知)相关文章
上一篇:CSS实例: nth-child和 nth-type-of的区别 下一篇:CSS实战:美化段落文本之首字下沉
回到顶部