您当前的位置: 首页 > 前端教程 > CSS教程 > css(样式表)页面居中对齐

css(样式表)页面居中对齐

作者:不详 来源:网络 发布时间: 2010-11-03 10:08 点击:
总结一下css让页面居中对齐的方法 1.我们常用的margin:0auto;方法 这个方法是大家用的最多的方法,使用的时候必须为容器制定宽度! 例子: #main{width:960px;margin:0auto;} 这个在大部分浏览器里面都可以很好的实现效果。 但是在IE6之前的版本中却不被支持,下面看一

css(样式表)页面居中对齐

  总结一下css让页面居中对齐的方法
  
  1.我们常用的margin:0auto;方法
  
  这个方法是大家用的最多的方法,使用的时候必须为容器制定宽度!
  
  例子:
  
  #main{width:960px;margin:0auto;}
  
  这个在大部分浏览器里面都可以很好的实现效果。
  
  但是在IE6之前的版本中却不被支持,下面看一下第二种方法
  
  2.用text-align实现居中,这个方法其实算是一个hack。
  
  这个方法把整个页面当作文本对待,把body的属性设置为{text-align:center;}
  
  这样的话页面所有内容全部居中了,还需要把页面总的外框(wrap)属性{text-align:left;}
  
  这样的话页面就居中了!
  
  代码:
  
  body{text-align:center;}
  
  wrap{text-align:left;}
  
  3.负的外边距
  
  负外边距需要和绝对定位同时使用,才会生效。
  
  首先需要一个{wrap}来包裹所有的页面内容,并将其定位到页面的50%。这样{warp}容器据浏览器左边50%的距离。
  
  然后再用负边距,将容器左边距设置为{wrap}宽度的一半即可。
  
  看代码:
  
  #wrap{width:800px;position:absolute;left:50%;margin:000-400px;}
  
  这样wrap就居中对齐了,这个方法基本上可以兼容所有的浏览器了。
  
  综上所述:第一种方法是我们大家首选的解决方案,第二种方法其实可以和第一种方法结合起来用更好,第三种方法是是可以兼容所有的浏览器,如果你对你的也页面兼容性要求的高些,这个也可以作为你的首选哈!

分享到:
本文"css(样式表)页面居中对齐"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(3)
100%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4