论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

DivCSS教程:DTD(文档类型)影响margin实现居中的分析

文章类别:div+css布局 | 发表日期:2008-9-26 11:14:14

  Div CSS教程:DTD(文档类型)影响margin实现居中的分析

 
  什么是DTD呢?也就是文档类型定义(Document Type Definition),我们在以前的教程中都已经经过很清楚了,不清楚的朋友可以回过头仔细的学习一下相关知识:
  CSS代码结构初探:DOCTYPE文档类型及浏览器的模式
 
  XHTML教程:Doctype文档类型声明必不可少!
  

  假如您正使用HTML 4.0,就要在创建的每张网页的开头处键入下列文档类型声明:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

  假如您正使用XHTML 1.0 Transitional,就要在创建的每张网页的开头处键入下列文档类型声明:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  通常我们在使用XHTML 1.0 文档类型声明下解决页面的居中问题是通过margin:0 auto;
  请您注重:margin:0 auto; 与margin-right:auto; margin-left:auto;是等同的效果。上面的代码是一种简写的形式。
  关于CSS属性的缩写,您可以参考下面的文章:
  CSS中级教程 快捷属性缩写
 

  XHTML 1.0 Transitional示例的代码如下:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  运行上面的代码,一切正常,假如我们去掉DTD声明,发现页面就出问题了。看下面的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  然而页面可能使用的是HTML 4.0文档类型声明,如何才能让页面居中呢,显然很多朋友已经发现了,同样的代码,同样的margin:0 auto;页面容器居左了,解决办法如下:
  主要的定义样式:
  body {text-align:center; }
  #container {margin:0 auto; width:500px; background:#ccc;}

  当您定义text-align:center;以后,会发现在IE下页面已经居中了,但是您会发现在mozilla下页面仍然是居左的,解决办法就是在子元素定义时候设定时再加上“margin:0 auto;”这样就可以完成页面容器居中的效果。
  假如你需要定义文字居中,需要单独进行设置,例如:#container { text-align:left;}
  代码如下:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  注重:假如您想用这个方法使整个页面要居中,建议在内容较多时不要套在一个DIV里,可以依次拆出多个div,只要在每个拆出的div里定义margin:0 auto;就可以了。假如内容不是非常多可以定义一个wrap层,让这一层居中即可。

  总结:
  margin在HTML 4.0文档类型声明下使页面居中首先要在父元素定义“text-align:center”然后在子元素定义的时候再加上“margin:0 auto;”即可。文字的居中,可以用“text-align:left”进行还原操作。
  margin在XHTML 1.0文档类型声明下通过“margin:0 auto”即可定义页面容器居中。

  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058