用CSS解决图片img垂直居中的问题

发表于2014-04-19 23:22| 次阅读| 来源管理员| 作者管理员

摘要：body div class="picshow"img src="imgs/picshow.jpg"//div/body 如何让img在div中水平垂直居中呢？我们都知道让img水平居中只需要给div设置样式text-align: center;即可。下面我们就来详细讲解一下如何让

<body>
       <div class="picshow"><img src="imgs/picshow.jpg"/></div>
</body>

如何让img在div中水平垂直居中呢？

我们都知道让img水平居中只需要给div设置样式 text-align: center;即可。下面我们就来详细讲解一下如何让img在div中垂直居中。

为了让我们更加容易观察，我们给div设置一个边框。那么div的样式如下

.picshow{width: 200px; height: 400px; text-align: center; 
    vertical-align: middle; display: table-cell; border: 1px solid #333;}
.picshow img{vertical-align: middle; }

这样在火狐、谷歌等浏览器中显示是我们需要的，但是在IE中却存在问题，所以我们要针对IE写一些样式

.picshow{width: 200px; height: 400px; text-align: center; vertical-align: middle;  
display: table-cell; *display:block; *font-size:350px; *font-family:Arial; border: 1px solid #333;}
.picshow img{vertical-align: middle; display:inline; }

这样写就能兼用IE了，其中

*font-size:350px;/*其值约为div高度的0.873，如果在IE6,7中不垂直，可适当调整其数值*/

*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

但是如果想让div在浏览器中间，直接添加样式{margin:0 auto;}是无效的，必须在div外面再嵌套一个div，给最外层div添加{margin:0 auto;}属性。因为大部分浏览器中的display:talbe-cell导致元素的margin属性失效。所以以后要是用到display:table-cell，就别在这个元素上再使用margin了。

最后运行的效果如图所示