DTD（文档类型）影响margin实现居中的分析（转）

来源：互联网发布：怎么设置淘宝邮箱账号编辑：程序博客网时间：2024/06/18 18:39

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">

<head>

<title>Div CSS教程：DTD（文档类型）影响margin实现居中的分析 - www.MB5U.com</title>

body { margin:0; padding:0;}

#container { margin:0 auto; width:500px; background:#ccc; height:100px; line-height:100px;}

</style>

</head>

<body>

使用XHTML 1.0 文档类型说明 - www.MB5U.com

</body>

</html>

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

<head>

<title>Div CSS教程：DTD（文档类型）影响margin实现居中的分析 - www.MB5U.com</title>

body { margin:0; padding:0;}

#container { margin:0 auto; width:500px; background:#ccc; height:100px; line-height:100px;}

</style>

</head>

<body>

去掉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">

<head>

<title>Div CSS教程：DTD（文档类型）影响margin实现居中的分析 - www.MB5U.com</title>

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>

使用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”即可定义页面容器居中。