[推荐] 2008年报关员考试复习全攻略
网页设计：CSS高级技巧之网页布局
＜div id="box">123＜/div>
＜/div>
＜/body>
CSS如下:
body{margin:0;padding:0;height:100%;}
.wrapper{display:table-cell;vertical-align:middle;width:600px;height:400px;border:solid 1px red;}
#box{width:200px;margin:auto;vertical-align:middle;border:solid 1px blue;}
按理说这样就可以了呀, 但是IE下面一点效果都没有...那是因为IE的display属性只接收:block, inline, inline-block, none, inherit, 不接收table, table-cell, table-row, 那就头痛了呀.
唔, 其实思路有很多, 我提供其中一种:
CSS如下:
body{margin:0;padding:0;height:100%;}
.wrapper{width:600px;height:400px;border:solid 1px red;}
#box{width:200px;height:200px;position:relative;top:50%;left:50%;margin-top:-100px;margin-left:-100px;border:solid 1px green;}
局限性非常大, 必须要已知高度...
更可以对IE浏览器进行filter之后hack它. 使用ie独有的expression, 虽然在大型脚本上expression表现的相当差, 但是简单的计算offsetHeight还是不太会影响性能, 再怎么说M$也针对expression进行过优化.
所以垂直居中还是要看场合自行挑选合适的方案来解决.
1 2
＜/div>
＜/body>
CSS如下:
body{margin:0;padding:0;height:100%;}
.wrapper{display:table-cell;vertical-align:middle;width:600px;height:400px;border:solid 1px red;}
#box{width:200px;margin:auto;vertical-align:middle;border:solid 1px blue;}
按理说这样就可以了呀, 但是IE下面一点效果都没有...那是因为IE的display属性只接收:block, inline, inline-block, none, inherit, 不接收table, table-cell, table-row, 那就头痛了呀.
唔, 其实思路有很多, 我提供其中一种:
CSS如下:
body{margin:0;padding:0;height:100%;}
.wrapper{width:600px;height:400px;border:solid 1px red;}
#box{width:200px;height:200px;position:relative;top:50%;left:50%;margin-top:-100px;margin-left:-100px;border:solid 1px green;}
局限性非常大, 必须要已知高度...
更可以对IE浏览器进行filter之后hack它. 使用ie独有的expression, 虽然在大型脚本上expression表现的相当差, 但是简单的计算offsetHeight还是不太会影响性能, 再怎么说M$也针对expression进行过优化.
所以垂直居中还是要看场合自行挑选合适的方案来解决.
1 2 特别说明：由于各方面情况的不断调整与变化，教育人生网所提供的所有考试信息仅供参考，敬请考生以权威部门公布的正式信息为准。
来源：网页教学网 责任编辑：
教
育
人
生
网
·
培
训
·
求
学
·
网
上
报
名
育
人
生
网
·
培
训
·
求
学
·
网
上
报
名
| ·自学考试新生入门手册 | ·上海高校在职研究生热招 |
教育人生网精彩推荐
更多优惠>> 热门课程 报名优惠
 |  |
| ·[凯育法语]TCF进阶精英班 |
| ·[星顿英语]商务英语一级12月一三晚班 |
| ·[欧风培训]法语起步寒假班 |
| ·[特爱外语]日语0-2级全套班 (含2级考前辅导） L41.. |
| ·[乐宁国际]寒假雅思高分冲刺班 |
| ·[华府教育]德语0-C级（紧缺办证书） |
| ·[智赢教育]12/21全外教商务精英口语初级 |
| ·[021艺]儿童美术免费试听课预约 |
推荐课程 分类
社区首页>> 互动学习社区
 |  |
更多>> 参与有奖活动
 |  |