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，就要在创建的每张网页的开头处键入下列文档类型声明：


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


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

　　XHTML 1.0 Transitional示例的代码如下：


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


　　然而页面可能使用的是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里，可以依次拆出多个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”即可定义页面容器居中。

　　

上一篇：{教程}CSS布局之再谈CSSDiv的居中实现方法 人气:2407
下一篇：{教程}CSS布局中可以用javascript判定浏览器版本 人气:2100

div+css布局视频教程