回到首页 | 联系我们 | 网站地图
·广州站 ·香港站 ·闪客天空 ·络思威互动 ·络思威设计
网站建设知道
网站教程
网站建设知识
网站教程 Teach

未知高度的非表格垂直对齐

2008年01月21日  来源: 深圳网络公司 作者:络思威

非已知高度的垂直对齐的条件:

表格单元格
行内块(inline-block)
第一个比较好理解,第二个很多人可能会忽略。比如,很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用IE的私有特性 valign="absmiddle"别无他法。记住,默认下图片就是属于inline-block,你只需简单的img {vertical-align:middle;}即可。

那么,我们进入主题。现在我们由于某些特殊需要两个并排的div想实现垂直居中。如前所述,div非表格,但是当代的浏览器中除了IE都支持display:table-cell。恰好,IE支持dispaly:inline-block,那么我们就用两种方式为当代浏览器实现非表格的垂直居中,殊途同归。

HTML如下:

<div id="div1">blah blah...看见我居中了吗?</div>
<div id="div2">
<p>blah blah...</p>
....
</div>

CSS如下:

#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}

我们来重点分析CSS。如您所知,*property是一个只有IE(包括IE7)才能解析的hack. 那么为何是inline而不是inline-block呢?这跟IE的变态工作方式有关,具体不深究。在此你只需知道加上zoom:1后,就等价于inline-block。另外,如果是a, span等非block的元素,则按正常方式display:inline-block。

关于我们 | 广告服务 | 招聘信息 | 付款方式 | 联系我们 | 客户服务 | 合作商专区 | 友情链接 | 旗下站点:闪客天空
访问络思威相关站点:
Copyright(@)2007-2009 深圳市络思威网络科技有限公司 版权所有 Tel:0755-81090947