完美的水平垂直居中！！

　2008/7/27 22:30:41　阅读 971 次

完美的水平垂直居中！！--兼容ie6，ie7，ff，opera，safari的水平垂直居中

点击下面的运行，可预览代码效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>完美的水平垂直居中！！--兼容ie6，ie7，ff，opera，safari的水平垂直居中</title> <style media="screen" type="text/css"> .wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;} .holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;} .holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;} .holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;} /* 分两套看 holder的 display:table holder div的 display:table-cell; vertical-align:middle; 就可以实现在ff，safari和opera下的垂直居中，但是对ie系列无效 holder的 position:relative; holder div的 *position:absolute; top:50%; left:0; .holder p的 position: relative; top:-50%; 通过控制绝对层的位置实现ie6，7下的垂直居中 holder div中的*position:absolute是只给ie6和7看的css hack 对于水平居中要说的是如果holder div的width如果未指明100%，在ie7中它是不会自动延伸100%的，也就无法实现水平居中 */ </style> </head> <body> <div class="wrapper"> <div class="holder"> <div><p><img src="http://webdesign.bitscn.com/UploadFiles_8014/200803/20080311145849892.gif" /></p></div> </div> <div style="line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;"> 以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试</div> </div> </body> </html>

来源：收集整理于互联网

相关阅读：

• 在Dreamweaver中轻松实现滑动折叠菜单_5 (2009/7/19 18:13:33)
• 在Dreamweaver中轻松实现滑动折叠菜单_4 (2009/7/19 18:13:33)
• 在Dreamweaver中轻松实现滑动折叠菜单_3 (2009/7/19 18:13:32)
• 在Dreamweaver中轻松实现滑动折叠菜单_2 (2009/7/19 18:13:32)
• 在Dreamweaver中轻松实现滑动折叠菜单 (2009/7/19 18:13:32)
• 用Dreamweaer自己动手制作活动菜单条_6 (2009/7/19 18:13:31)
• 用Dreamweaer自己动手制作活动菜单条_5 (2009/7/19 18:13:31)
• 用Dreamweaer自己动手制作活动菜单条_4 (2009/7/19 18:13:31)
• 用Dreamweaer自己动手制作活动菜单条_3 (2009/7/19 18:13:30)
• 用Dreamweaer自己动手制作活动菜单条_2 (2009/7/19 18:13:30)
• Dreamweaver4神童教程之九 (2009/7/19 18:13:29)
• Dreamweaver4神童教程之十 (2009/7/19 18:13:29)
• Dreamweaver4神童教程之十一 (2009/7/19 18:13:29)
• Dreamweaver4神童教程之十三 (2009/7/19 18:13:28)
• Dreamweaver4神童教程之十四 (2009/7/19 18:13:28)
• Dreamweaver4神童教程之十五 (2009/7/19 18:13:28)
• Dreamweaver4神童教程之十六 (2009/7/19 18:13:27)
• MicromediaDreamweaverUltraDev安装及使用教程(1) (2009/7/19 18:13:27)
• MicromediaDreamweaverUltraDev安装及使用教程(3) (2009/7/19 18:13:26)
• MicromediaDreamweaverUltraDev安装及使用教程(5) (2009/7/19 18:13:26)

温馨提示

特别声明

• Phontol.com 和网页作者无关，不对网页的内容负责。
• 非本站原创内容和本站转载内容，其版权所有权属于原版权持有人所有。
• 本站转载的部分内容是出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。
• 如有任何异议，请参见版权声明/免责声明部分。

最新热点资讯排行: • 消息称谷歌与Dish合作测试电视节目搜索服务
• Web2.0由窗口变柜台戴尔微博营销引思考
• 微软推出MSN.com新设计加入更多必应搜索框
• 国际卫星电话实行一费制标准
• 谷歌称不会合并谷歌纵横与GoogleBuzz
• 全球COM等域名实名率仅为23%
• 微软Courier平板电脑更多细节流出年底前出货
• Office2010完工在即微软已推免费升级计划
• 传微软第四季度发布Windows7SP1
• 从第25届汉诺威博览会看IT技术发展趋势
• 微软亚太总经理柯文达：全球进入主动服务时代
• “天河一号”今年装上自制CPU
• MochiMedia推MochiSocial开发者平台
• 抛开索尼东芝先行结盟收取DVD专利费
• 中关村电子城商户欺客将出局
• 三网融合或5月获批传媒股应声领涨

图片资讯

内置WiFi无线宏碁24智能型显示器亮相	细节决定成败联力全铝P50机箱详测试
释放自由轻松体验koobeeK9功能评测	霸主HD2速降中诺基亚N97mini价格直降
击溃二线技嘉DDR3版固态770新品599元	OPPOA201与阳光少女尽显青春时尚魅力
尽显高科技风范索尼发布10款家用摄像机	感受150M的强势多款150M无线路由推荐

: • 平民机型不平凡移动定制LGTB200图赏
• 用成绩说话五大主流U实测星际争霸II_2
• DDR3内存性价比较高2GB均价330元_4
• 触摸屏DC新贵佳能IXUS210IS精美图赏
• 手机老大位置堪忧诺基亚开源Symbian系统
• 使用apt-p2p更新Ubuntu
• 用成绩说话五大主流U实测星际争霸II
• 价格是关键西数首款消费级SSD测试
• 三星NX10领航三星2010年春季新品发布会
• C网Jet捷S8000C电信定制三星F809评测