再说display的inline-block属性
以前用惯了float来进行页面item的布局,发现用inline-block属性也是很不错的 。有些地方要注意下:
diaplay:inline-block;
内联元素浏览器都支持;块级元素在IE6/7下面不支持,这时候加上
?
*display:inline;*zoom:1;就可以了。
?
关于垂直居中的问题,居然也可以用display:inline-block实现:
?
由于 inline 元素是可以自然地 vertical-align 的,所以将需要设定垂直居中的元素设定
?
为 inline-block,同时引入该元素的一个冗余的兄弟元素同样设定为 inline-block,并且 height:?
?
100%,再设定两者都为 vertical-align: middle。如果该元素设置了有高度,在设置下line-height=高度。这样就可以实现垂直居中啦。
eg:
<div class="abc">
? ? ? ?<div class="bcd">ddd</div>
? ? ? ?<div class="h"></div>
</div>
.abc
{
? ?border:1px solid #666;
? ?height:50px;/*不设置也行*/
}
.bcd
{
height:20px;
line-height:20px;
display:inline-block;
vertical-align:middle;
*display:inline;
*zoom:1;
}
.h
{
display:inline-block;
height:100%;
vertical-align:middle;
*display:inline;
*zoom:1;
}