首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > 网站重构教程 > 正文
未知高度的非表格垂直对齐
来源:Realazy 作者:Realazy 2007年04月11日 08:54 网友评论:0条 点击:

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

  • 表格单元格
  • 行内块(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 全部选择]

上一篇:学习CSS布局心得   下一篇:标准的 语义的 非侵入的页签切换
收藏此页】【打印】【关闭
 相关文章  我要点评
·实现.NET中生成二维表格的代码
·实现ASP网页输出N行N列表格的方法
·越减越妙:简单表格的再设计
·霓虹灯闪烁表格代码

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告服务 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】