不定宽高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中垂直居中。

　　七七代码解析：这个方法的原理是在img标签前面插入一个空的span标签，利用它来撑开div内的行高到100%。

本文关键词：不定宽高div内图片垂直居中的css样式样式情况图片高的

上一篇：CSS引入：4种方法引用到HTML页面
下一篇：css3使网页、图片变成灰色