让图片在div里面垂直居中

很多人都知道，无论是图片还是文字，在div里面水平居中是很容易的，而垂直居中却比较困难。今天一个偶然的尝试，让我解决了这个问题。

这里涉及到两个属性，一个是line-height，另一个是vertical-align。在IE里面，只需要line-height就可以实现这个效果，不过要想在firefox和opea里面也实现这样的效果，必须用到vertical-align，而且这是属性一定要定义在image上面，而不是定义在div上。请看下面的代码：

IE中的代码：

div{
height:100px;
line-height:100px;
}
div img{
vertical-align:middle; /*optional*/
}
 
Firefox的代码：

div{
height:100px;
line-height:100px;
}
div img{
vertical-align:middle;
}

虽然这个问题解决了，但是我还是稍微有一点点不理解，为什么vertical-align必须定义在image上，而定义在div上不行。我仔细看过vertical-align的说明，上面给它最直观的定义是：设置或检索对象内容的垂直对其方式。 可是怎么看，我都和今天用法对不起来，也希望各位高手不吝赐教。

 

来源:http://blog.fesite.com/2007/06/25/div/

转载于:https://www.cnblogs.com/kaixin110/archive/2010/08/27/1810175.html