CSS网页布局DIV水平居中的各种方法

• 　　在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法：
  
  　　一、margin:auto 0 与 text-aligh:center
  
  　　在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。意即：
  
  #wrap { margin:0 auto;}
  
  　　上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器（如Internet Explorer 7、Firefox、Opera等）中运行现在的代码：
  
  ＜!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＞
  ＜title＞ new document ＜/title＞
  ＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
  ＜style type="text/css"＞
  div#wrap {
  width:760px;
  margin:0 auto;
  border:1px solid #333;
  background-color:#ccc;
  }
  ＜/style＞
  ＜/head＞
  ＜body＞
  ＜div id="wrap"＞
  
  　　在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
  
  ＜pre＞
  div#wrap {
  width:760px;
  margin:0 auto; /*这里的0可以任意值*/
  border:1px solid #ccc;
  background-color:#999;
  }
  ＜/pre＞
  ＜/div＞
  ＜/body＞
  ＜/html＞
  
  　　上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的，不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码：
  
  body {text-align:center;}
  #wrap {text-align:left;}
  
  　　这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：
  
  body { text-align:center; }
  #wrap { text-align:left;
  margin:0 auto;
  }
  ＜!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＞
  
• [1] [2] [3] 下一页 
• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• CSS网页布局DIV水平居中的各种方法 相关文章：
• ·综合布线系统工程设计参考大全
• ·[综合]惊天动地怪物分布图
• ·FLASH 8实例教程：瀑布动画制作方法
• ·办公大楼综合布线系统设计方案--康宁公司布线系统专题
• ·布线工程施工方法--配线架的打法
• ·校园网综合布线系统设计方案
• ·《龙珠Z 布欧之怒》剧情攻略 - 游戏攻略
• ·彻底弄懂CSS盒子模式（DIV布局快速入门）
• ·网页设计基础:Div+CSS布局入门教程
• ·flash8打造瀑布动画效果教程
• CSS网页布局DIV水平居中的各种方法 相关软件
• ·《天堂2》最新公布背景音乐欣赏
• ·QQ代理发布器 V2007
• ·若比邻互联网发布闪电加速器 V3.0正式版
• ·布卡战机
• ·小甜甜布兰妮
• ·仙剑3 未公布音乐集
• ·僵尸斯塔布斯
• ·专业Socks5公布器 V2.0
• ·布谷鸟2007 局域网聊天工具 V3.00
• ·福布斯电脑革命史

上一篇:用Photoshop打造水晶球中的美女

下一篇:Flash as3：绝对坐标与相对坐标

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐