您当前的位置：首页 > 建站常识 > css强化

不定宽高div内图片垂直居中css样式

2014-07-13

　　在不定宽高的情况下，div内图片如何垂直居中，css样式如何书写？示例代码如下：

　　最简单的办法是，设置外层元素的css属性：

　　div{display:table-cell}

　　但ie6/7不支持这个属性，为了兼容，我们采用如下样式：

　　html代码如下:

　　css代码：

　　div{
　　width: 100px;
　　height: 100px;
　　border: 1px solid #ccc;
　　}
　　span{
　　line-height: 100%;
　　vertical-align: middle;
　　display: inline-block;
　　height: 100%;
　　}
　　img{
　　width: 100%;
　　vertical-align: middle;
　　}

　　通过设置以上属性可以达到下图的效果，图片在div中垂直居中。