首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

再则display的inline-block属性

2012-09-10 
再说display的inline-block属性以前用惯了float来进行页面item的布局,发现用inline-block属性也是很不错的

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

}

热点排行