您现在的位置： 圆点视线 >> 教程 >> 网页设计 >> DIV＋CSS专栏 >> 文章正文
[图文]未知高度的非表格垂直对齐           ★★★
未知高度的非表格垂直对齐
作者：Realazy 　文章来源：Realazy 　点击数： 　更新时间：2007-8-11 10:09:12　
　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 【字体：小 大】

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

  • 表格单元格
  • 行内块（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 全部选择]
　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：Rainsion    责任编辑：Rainsion 　【字体：小 大】
　
  • 上一篇文章：

    • 　
  • 下一篇文章：
    • 最新文章
    相关文章
    Dreamweaver MX应用表格排序
    简单实用的网页表格特效
    DW MX实例:利用表格美化页面
    驯服不听话的网页表格
    制作1px边框表格的几种方法
    表格边框的隐藏
    Html网页表格深层探密
    表格艺术经典回顾
    避免表格table被撑开变形的CSS
    1px边框表格的几种制作方法
    网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    发表评论：
    　姓　　名： 评 分： 1分 2分 3分 4分 5分
    　评论内容： ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点，与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门