我必须舍弃一些东西————
最近在接触淘宝的U站,觉得有些意思,但是渐渐的,我觉得自己似乎对于这个东西的投入的精力变多了;或者是我被他吸引了,盘算着一些事情。但是我还是想不要这样了,
我必须舍弃一些,专心继续学习才是. 在这提醒下自己,想到在空间看到人家说的一句话“这世界最可怕的是,比你优秀的人竟然比你还要努力!”。
前面有段时间,坐在这个位子上,觉得我为什么要浪费一整天的时间?!浪费我的青春?!心里就一阵阵的悲伤!
这半年,是我曾经希望在的地点,可是,现在我不纠结,也不幽怨了,却在颓废!
记录下,今天群里面讨论的在“div里面图片居中”,这算是一个老生常谈,刚开始接触css的时候就遇到过这个问题。
html如下:
<div class="wrap" data="gid">
<img src="images/w5.jpg" />
<i></i>
</div>
css如下:
.wrap{
position:relative;
600px;
height:600px;
background:orange;
}
.wrap img{vertical-align: middle;}
.wrap i{display: inline-block;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; 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; 80px;height: 20px;line-height: 20px;}
input{ 120px;height: 18px;border:1px solid #fc0;}
这个时候又正常了。OK。其实上面的那个例子
A:加个.test{display:inline;}就好了。但是问题又来了,IE7好了,现代浏览器又坏了0.0
B: .test{display: inline; 100px;height: 100px;background:#000;zoom:1;}
但是这两种方法解决了IE7,现代浏览器 都不支持哦,好坑爹的inline-block呀!!(当然这个是针对ex1)