图片居中跟inline-block

我必须舍弃一些东西————

　　最近在接触淘宝的U站，觉得有些意思，但是渐渐的，我觉得自己似乎对于这个东西的投入的精力变多了；或者是我被他吸引了，盘算着一些事情。但是我还是想不要这样了，

　　我必须舍弃一些，专心继续学习才是. 在这提醒下自己,想到在空间看到人家说的一句话“这世界最可怕的是，比你优秀的人竟然比你还要努力！”。

　　前面有段时间，坐在这个位子上，觉得我为什么要浪费一整天的时间？！浪费我的青春？！心里就一阵阵的悲伤！

　　这半年，是我曾经希望在的地点，可是，现在我不纠结，也不幽怨了，却在颓废！

　　记录下，今天群里面讨论的在“div里面图片居中”，这算是一个老生常谈，刚开始接触css的时候就遇到过这个问题。

　　html如下：

　　<div class="wrap" data="gid">
　　　　<img src="images/w5.jpg" />
　　　　<i></i>
　　</div>

　　css如下：　

　　.wrap{
　　　　position:relative;
　　　　width:600px;
　　　　height:600px;
　　　　background:orange;
　　}

　　.wrap img{vertical-align: middle;}

　　.wrap i{display: inline-block;width:0;height: 100%;vertical-align: middle;font-size: 0;}

　　可以下控制台输出img.offsetTop; // 99   检测是不是居中(注意offsetTop，必须这个元素的父元素position:xxx;)

　　PS： 还有一个方法，但是IE7下面不支持

　　.wrap img{

　　　　position:absolute;
　　　　top:0;
　　　　bottom:0;
　　　　left:0;
　　　　right:0;　
　　　　margin:auto;
　　}

　　总结vettical-align

　　1. 只有行内元素和行内块元素才可以使用vertical

　　2. vertical-align只对同级的元素有效，要说到基线的问题了，vertical middle就是把基线设置成在元素中间，那么怎么才能再父元素里居中呢，那当然就得有个高度和父元素一样的元素也设置了middle了

　　然后又讨论了display:inline-block

　　　ex1:

　　　　HTML: 

　　　　　　<div class="test"></div><span>我靠 IE到底支持displayL:inline-block;嘛？？？</span>

　　　　CSS :

　　　　　　.test{display: inline-block;width: 100px;height: 100px;background:#000;}

　　　　到现代浏览器跟IE7下面，IE7竟然换行了！那是为什么呢？可以参考：http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

　　　　但是我把div换成label：

　　　ex2:

　　　　HTML: 

　　　　　　<label>用户名：</label><input type="text" value="到底支持嘛？" />

　　　　CSS：

　　　　　　label{display: inline-block;width: 80px;height: 20px;line-height: 20px;}

　　　　　　input{width: 120px;height: 18px;border:1px solid #fc0;}

　　　　这个时候又正常了。OK。其实上面的那个例子

　　　　　　A：加个.test{display:inline;}就好了。但是问题又来了，IE7好了，现代浏览器又坏了0.0

　　　　　　B： .test{display: inline;width: 100px;height: 100px;background:#000;zoom:1;}

　　　　但是这两种方法解决了IE7，现代浏览器 都不支持哦，好坑爹的inline-block呀！！(当然这个是针对ex1)