Div CSS教程：DTD（文档类型）影响margin实现居中的分析
源地址：http://www.mb5u.com/divcssjiaocheng/22327.html 什么是DTD呢？也就是文档类型定义（Document Type Definition），我们在以前的教程中都已经经过很清楚了，不清楚的朋友可以回过头仔细的学习一下相关知识： CSS代码结构初探：DOCTYPE文档类型及浏览器的模式 XHTML教程：Doctype文档类型声明必不可少！ 假如您正使用HTML 4.0，就要在创建的每张网页的开头处键入下列文档类型声明：
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">假如您正使用XHTML 1.0 Transitional，就要在创建的每张网页的开头处键入下列文档类型声明：
<!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;是等同的效果。上面的代码是一种简写的形式。 XHTML 1.0 Transitional示例的代码如下：
<!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>Div CSS教程：DTD（文档类型）影响margin实现居中的分析 - www.MB5U.com</title> <style type="text/css"> body { margin:0; padding:0;} #container { margin:0 auto; width:500px; background:#ccc; height:100px; line-height:100px;} </style> </head> <body> <div id="container"> 使用XHTML 1.0 文档类型说明 - www.MB5U.com </body> </html>
运行上面的代码，一切正常，假如我们去掉DTD声明，发现页面就出问题了。看下面的运行效果：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div CSS教程：DTD（文档类型）影响margin实现居中的分析 - www.MB5U.com</title> <style type="text/css"> body { margin:0; padding:0;} #container { margin:0 auto; width:500px; background:#ccc; height:100px; line-height:100px;} </style> </head> <body> <div id="container"> 去掉DTD声明 - www.MB5U.com</body> </html>
然而页面可能使用的是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;} 代码如下：
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div CSS教程：DTD（文档类型）影响margin实现居中的分析 - www.MB5U.com</title> <style type="text/css"> body {text-align:center; margin:0; padding:0;} #container {margin:0 auto; width:500px; background:#ccc; height:100px; line-height:100px; text-align:left;} </style> </head> <body> <div id="container"> 使用HTML 4.0 文档类型说明 - www.MB5U.com </div> </body> </html>
注意：假如您想用这个方法使整个页面要居中，建议在内容较多时不要套在一个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”即可定义页面容器居中。
