再说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;

}