征集网锐志网络淘途找素材上91
创意在线首页
平面设计交互设计CG动漫工业设计建筑环境数码影像创意搜
 首页大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧 找素材看酷站设计网址库
教程网 Illustrator、Photoshop、CoreaDreaw、AI教程、PS教程
当前位置:首页 > 教程 > 网站重构 > 正文
未知高度的非表格垂直对齐
作者:Realazy 来源:Realazy 发表时间:2007-9-23 20:49: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 全部选择]


在线编辑:52design
本文链接:


推荐阅读:
·2018第十届中国高校美术作品学年展征稿
·2018第四届“包豪斯奖”国际设计大赛 征集公告
·2018国际艺术设计大赛——互艺奖
·儿童插画培训远程培训班 远程直播授课
·为了渲个人物,我玩坏了3台电脑...
·3000元 2018中国客户联络中心奖logo及奖杯设计征集
·2万元 第七届世界军人运动会征集志愿者口号与昵称
·10000元 河北省第三届(邢台)园林博览会吉祥物、会歌征集
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

近期推荐报道 返回首页更多精彩等着你!