网管联盟 | 网管论坛 | 网管u家 | 网管博客 | 网管软件 | 网管求职 | 小游戏 | 网管搜索 | 网管原创 | 网管聚合 | 网管读摘 | 网管焦点 | 世界素材 | 会员投稿 | 会员中心 
中国网管联盟
Windows Linux Cisco 网络技术 数据库 黑客攻防 DotNet Java PHP 认证 新闻资讯 服务器 存储资讯 网络设备 网管学堂 技术专题 焦点 网吧频道
 当前位置: > bitsCN.com > 网管学堂 > 网页设计 > Flash > 基础教程 > 多种浏览器下CSS控制DIV居中的代码  

多种浏览器下CSS控制DIV居中的代码

2008-06-06  作者:bitsCN整理  来源:中国网管联盟  点评 投稿 收藏

    关于CSS 控制DIV水平居中问题,我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书,那个里面谈到居中使用。

中国网管论坛bbs.bitsCN.com

  margin-left:auto;
  margin-right:auto; 网管下载dl.bitscn.com

  其实等同于: 网管u家u.bitsCN.com

  margin:0 auto;

网管网www_bitscn_com

  于是可以使用这种方式,但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。

网管u家u.bitsCN.com

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  网管网www_bitscn_com


  非常多的人犯过类似的错误!这种方法也可以说屡试不爽,但是在某些情况下还是行不通的。于是有了第二种方法。

网管网www_bitscn_com

  margin-left:50%;
  left: -width/2;

网管网www_bitscn_com

  这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽,那么你就应该设置left:-384px。很好,已经有两种方法了,可以说已经能够解决你可能遇到的问题了。

网管网www_bitscn_com

  有时候你会发现,这两个还不行。不能兼容一些浏览器。于是发现有了第三种方法,这中方法主要是考虑IE,它是建立在第一种方法的基础之上。它需要设置body。

网管网www_bitscn_com

  body {text-align: center;}

中国网管论坛bbs.bitsCN.com

  这样IE下也居中了,但是它带来一个新的问题,你发现你的页面中所有文字都是居中的,这样很不好看。这个就很容易解决了,只需要在你的DIV定义中加上 text-align: left; 之类调整的设置就行了。 网管bitscn_com

 

网管联盟bitsCN_com


TAGs
 上一篇:像Table一样对层DIV进行轻松布局   下一篇:CSS网页布局中ID与Class的应用讲解
多种浏览器下CSS控制DIV居中的代码 评论:
loading.. 评论加载中…
评论:请自觉遵守互联网相关政策法规,评论不得超过250字。

验证码: 注册用户
本类热门排行:
最新推荐文章:
网管论坛交流: