码迷,mamicode.com
首页 > 其他好文 > 详细

不定宽的图片水平垂直居中

时间:2014-12-03 16:58:35      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:sp   on   bs   ef   size   nbsp   方法   text   如何   

如何让不定高和不定宽的图片水平垂直居中在某一个定高定宽的容器中呢,请听我细细到来。

现在有很多浏览器(如chrome,部分ie,firefox,opera等)都支持display:table,display:table-cell,让图片水平垂直居中就很简单了,给外部容器加一个display:table和vertical-align:middle,text-align:center属性,图片给display:table-cell属性,就可以实现水平垂直居中。

当然,并不是所有的浏览器(如ie6,等)都不支持display:table-cell以及display:table属性,这样的浏览器就得用其他的方法实现水平垂直居中了。搜了很多方法,发现了很神奇的用font-size可以实现图片的水平垂直居中,将外部容器的font-size给一个和外面容器本身高度差不多的值,即可实现图片的水平垂直居中。

 

ps:如果容器中不只是图片,还有其他的文字这个方法就不合适了。

 

不定宽的图片水平垂直居中

标签:sp   on   bs   ef   size   nbsp   方法   text   如何   

原文地址:http://www.cnblogs.com/czyblog/p/4140331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!