注册登陆
建站服务
联系信息
 |
视动工坊：动易认证设计师 | |
|
动易模板大赛连续两次获奖 | |
|
现共完成动易模板100余个 | |
|
热诚欢迎定制改制动易模板 | |
|
Q Q： | 363881827 |
|
手机： | 13153001848 |
|
Tel： | 0531-83711777 |
|
Mail： | wsdjqwj2003@163.com |
未知高度的非表格垂直对齐
作者：佚名 文章来源：本站原创 点击数： 更新时间：2008-8-23 12:14:57
非已知高度的垂直对齐的条件：
- 表格单元格
- 行内块（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 全部选择]
设计中心录入：alang 责任编辑：alangyuafeng929
评论主题：未知高度的非表格垂直对齐（评论内容只代表网友观点）
版权所有：copyright 2005-2008 动易模板NO.1 核心：PowerEasy SiteWeaver™ 6.6 备案：鲁ICP备05007599号
电话：0531－83711777（晚间）手机：13153001848 QQ:363881827 群号：一群13022466（满）二群36354619
电话：0531－83711777（晚间）手机：13153001848 QQ:363881827 群号：一群13022466（满）二群36354619
