未知高度的非表格垂直对齐教程
作者：佚名 时间：2007-09-26 来源：网络收集
非已知高度的垂直对齐的条件：
- 表格单元格
- 行内块（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。
例子：
运行代码框
[Ctrl+A 全部选择]
- 上一篇：XML入门教程:XML CDATA教程
- 下一篇：网页放大缩小的功能(CSS)
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。 特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。
免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。对本文有任何异议，请联络：5000sky@gmail.com- ※ 评论注意事项：
- 您的评论将在管理员审核后才会显示。
- 不是中华大观园会员或未登陆发表评论，评论人名字显示为匿名。
- 尊重网上道德，遵守中华人民共和国的各项有关法律法规
- 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
- 本站管理人员有权保留或删除评论中的任意内容
- 参与本评论即表明您已经阅读并接受上述条款
