CSS技巧如何使图片自适应DIV垂直居中与水平居中

作者:Davidszhou   来源:   时间:2016-09-23 09:57:38   点击:

  CSS技巧如何使图片自适应DIV垂直居中与水平居中
网站首页图片形形色色,各种尺寸都会有,可能一条CSS规则也满足不了所有图片对于DIV进行自适应尺寸,以及垂直居中、水平居中。
下面我们就来看以下利用CSS可是使所有图片对应不同尺寸规格的DIV宽度进行自适应,而且让图片根据DIV宽度成比例的按高度进行缩放。
老规矩先贴代码:
<style type="text/css">
#zongk { width:500px; margin:0 auto; height:500px; display:table; border:1px #000000 solid;}
#zongk span { display:table-cell; vertical-align:middle; text-align:center;}
#zongk span img { max-width:100%; max-height:500px;}
</style>
<div id="zongk">
<span><img src="img/1.gif"/></span>
</div>
CSS技巧如何使图片自适应DIV垂直居中与水平居中主要是利用的table表格中:vertical-align:middle; 这个属性, 利用display:table;将DIV模拟成table.
细心可以发现在IMG标签上又套了一个span,这里利用display:table-cell;将其模拟成类似表格的TD元素,这样vertical-align:middle;垂直居中起到效果

CSS技巧如何使图片自适应DIV垂直居中与水平居中

TAGS:CSS技巧 , 图片自适应 , 垂直居中 , 水平居中

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/80.html转载请标注此链接

文章推荐
网站统计
文章总数:129
今天发布:0
软件资源数:18