首页 > 代码库 > 不定宽的图片水平垂直居中

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

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

现在有很多浏览器(如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:如果容器中不只是图片,还有其他的文字这个方法就不合适了。

 

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