text-align 用法浅谈
本文所讲内容有以下几个:
1 text-align:center的功能：实现元素内部文字的居中。
2 容器内部块级元素的居中方法。
3 text-align:center什么时候会失效：涉及到xhtml的文件类型定义问题。
4 引申问题：关于css中类和id使用的时候大小写的问题探讨。
实例代码：
1 解释：以往我认为text-align就是所谓的内部内容居中，在css参考手册中，对这个属性的解释是这样的：
该属性通过指定行框与哪个点对其，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
暂且不管它的解释，通过实验我得出的结论是：text-align属性所对应的center，right，left等属性是对于内部的文字而言的，而不是对于内部的一切要素。比如上面的实例代码，我们拿到浏览器中进行测试发现，虽然，对div实施了text-align:center，但是div内部的h1标记并没有居中，（用firedebug可以清楚的看出来），仍然是左对齐。但是h1标签里的文字，却确实在h1标签中居中显示了。
所以得出结论：align-align：center实现的是容器内部文字的对齐，而不是容器内容器的对齐方式。
2 那么我们再想想，容器本身的对齐方式是怎么实现的呢？答：1 在不施加任何样式的情况下，容器都是按照网页文本流进行对齐的，默认左对齐。2 若想居中对齐，可以对容器本身使用css样式：margin：0 auto；（即上下外边距为0，左右自动），这样写的话，就会实现本容器相对于他的父元素来居中对齐。
3 text-align:center什么时候会失效：涉及到xhtml的文件类型定义问题。
以上，我用火狐浏览器进行测试的，得出来的效果符合我上述的理论。然而如果大家用360或者ie之类的浏览器，便会发现事实与理论是相悖的。事实是：div内部的h2也居中了，h2内部的文字也居中了。 这是为何? 经过仔细研究发现，xhtml文档的类型定义起到了作用。
所以接下来讲一下xhtml文档的类型定义。
XHTML 是更严格更纯净的 HTML 代码。XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。 XHTML 与 HTML 4.01 几乎是相同的。 XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。 XHTML 是一个 W3C 标准。XHTML 是 HTML 与 XML（扩展标记语言）的结合物。XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。
标签名必须用小写字母。 XHTML 文档必须拥有根元素。属性名称必须小写 属性值必须加引号 属性不能简写 用 Id 属性代替 name 属性 XHTML DTD 定义了强制使用的 HTML 元素
所有 XHTML 文档必须进行文件类型声明（DOCTYPE declaration）。在 XHTML 文档中必须存在html、head、body元素，而 title 元素必须位于在 head 元素中。
那么，<html>标签里面的那一串字符是什么？ 答：在 XHTML 中，<html> 标签内的 xmlns 属性是必需的。然而，即使当 XHTML 文档中没有这个属性时，w3.org 的验证工具也不会提示错误。这是因为，"xmlns=http://www.w3.org/1999/xhtml" 是一个固定的值，即使你没有把它包含在代码中，这个值也会被添加到 <html> 标签中。
解释刚才所发生的现象？为什么火狐中显示符合理论要求，但ie中却不符合。原来是因为：如果你希望将页面验证为正确的 XHTML，那么页面中必须含有文件类型声明。需要注意的是，根据不同的文件类型声明，比如 Internet Explorer 6 ，7，8对文档的处理方式也是不同的。如果浏览器读到一个文件类型声明，那么它会按照“恰当”的方式来处理文档。如果没有 DOCTYPE，文档也许会以截然不同的方式显示出来。 所以，火狐其实是把页面当做xhtml文档来处理了，而ie却没有发现文档声明，所以采用了另一种方式处理。
大家可以用以下代码来测试：（分别把头部的文档类型声明去掉和加上，来对比效果。注意：在ie浏览器中。）
我们可以发现，IE6，IE7中，有没有文档类型声明都一样，页面是居中显示的，而IE8中，如果没有文档类型声明，页面确实是居中的，但是如果有声明，则按照我们第二条所说的理论，div并没有居中，而是div内部的文字居中了。（header部分中间有文字）
4 引申问题：css大小写
这里我们可以发现一个问题。在上面的代码中。class=blueblock 和greenblock这里，单词中间有大写字母。那么如果我们改成小写可以吗。换句话说，css对大小写敏感吗。答案是：使用了transitional类型声明的时候，大小写敏感，不使用transitional声明时，大小写不敏感。
本文稍有改动，原文摘自：http://blog.gishome.org/post-30.html
但是很奇怪，如果给块元素加一个
有人理解为：text-align只作用其中的inline元素，对block元素无效。
要想里面的div受作用，需要将它设置为inline元素，但是inline元素又不能设置height/width，所以可以给div加一个属性：
display:inline-block;
上例也可以验证给
分享按钮
1 text-align:center的功能：实现元素内部文字的居中。
2 容器内部块级元素的居中方法。
3 text-align:center什么时候会失效：涉及到xhtml的文件类型定义问题。
4 引申问题：关于css中类和id使用的时候大小写的问题探讨。
实例代码：
<html>
<head>
<style type="text/css">
div {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head><body>
<div>
<h1 style="width:400px;">这是标题 1</h1>
</div>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</body></html>1 解释：以往我认为text-align就是所谓的内部内容居中，在css参考手册中，对这个属性的解释是这样的：
该属性通过指定行框与哪个点对其，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
暂且不管它的解释，通过实验我得出的结论是：text-align属性所对应的center，right，left等属性是对于内部的文字而言的，而不是对于内部的一切要素。比如上面的实例代码，我们拿到浏览器中进行测试发现，虽然，对div实施了text-align:center，但是div内部的h1标记并没有居中，（用firedebug可以清楚的看出来），仍然是左对齐。但是h1标签里的文字，却确实在h1标签中居中显示了。
所以得出结论：align-align：center实现的是容器内部文字的对齐，而不是容器内容器的对齐方式。
2 那么我们再想想，容器本身的对齐方式是怎么实现的呢？答：1 在不施加任何样式的情况下，容器都是按照网页文本流进行对齐的，默认左对齐。2 若想居中对齐，可以对容器本身使用css样式：margin：0 auto；（即上下外边距为0，左右自动），这样写的话，就会实现本容器相对于他的父元素来居中对齐。
3 text-align:center什么时候会失效：涉及到xhtml的文件类型定义问题。
以上，我用火狐浏览器进行测试的，得出来的效果符合我上述的理论。然而如果大家用360或者ie之类的浏览器，便会发现事实与理论是相悖的。事实是：div内部的h2也居中了，h2内部的文字也居中了。 这是为何? 经过仔细研究发现，xhtml文档的类型定义起到了作用。
所以接下来讲一下xhtml文档的类型定义。
XHTML 是更严格更纯净的 HTML 代码。XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。 XHTML 与 HTML 4.01 几乎是相同的。 XHTML 是更严格更纯净的 HTML 版本。
XHTML 是作为一种 XML 应用被重新定义的 HTML。 XHTML 是一个 W3C 标准。XHTML 是 HTML 与 XML（扩展标记语言）的结合物。XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。
标签名必须用小写字母。 XHTML 文档必须拥有根元素。属性名称必须小写 属性值必须加引号 属性不能简写 用 Id 属性代替 name 属性 XHTML DTD 定义了强制使用的 HTML 元素
所有 XHTML 文档必须进行文件类型声明（DOCTYPE declaration）。在 XHTML 文档中必须存在html、head、body元素，而 title 元素必须位于在 head 元素中。
那么，<html>标签里面的那一串字符是什么？ 答：在 XHTML 中，<html> 标签内的 xmlns 属性是必需的。然而，即使当 XHTML 文档中没有这个属性时，w3.org 的验证工具也不会提示错误。这是因为，"xmlns=http://www.w3.org/1999/xhtml" 是一个固定的值，即使你没有把它包含在代码中，这个值也会被添加到 <html> 标签中。
解释刚才所发生的现象？为什么火狐中显示符合理论要求，但ie中却不符合。原来是因为：如果你希望将页面验证为正确的 XHTML，那么页面中必须含有文件类型声明。需要注意的是，根据不同的文件类型声明，比如 Internet Explorer 6 ，7，8对文档的处理方式也是不同的。如果浏览器读到一个文件类型声明，那么它会按照“恰当”的方式来处理文档。如果没有 DOCTYPE，文档也许会以截然不同的方式显示出来。 所以，火狐其实是把页面当做xhtml文档来处理了，而ie却没有发现文档声明，所以采用了另一种方式处理。
大家可以用以下代码来测试：（分别把头部的文档类型声明去掉和加上，来对比效果。注意：在ie浏览器中。）
<!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>
<title>example2</title>
<style type="text/css">
body,div{padding:0;margin:0;text-align:center;}
.header{width:960px;height:150px;background:#a2f;margin-top:4px;}
.footer{margin-top:10px;margin-bottom:10px;background:#900;width:960px;height:120px;}
.blueBlock{width:756px;height:400px;background:#009;float:left;}
.greenBlock{width:200px;height:400px;background:#090;float:left;margin-left:4px;}
.main{width:960px;overflow:hidden;background:#1ee;margin-top:10px;}
</style>
</head>
<body>
<div>2143324</div>
<div>
<div></div>
<div></div>
</div>
<div></div>
</body>
</html>我们可以发现，IE6，IE7中，有没有文档类型声明都一样，页面是居中显示的，而IE8中，如果没有文档类型声明，页面确实是居中的，但是如果有声明，则按照我们第二条所说的理论，div并没有居中，而是div内部的文字居中了。（header部分中间有文字）
4 引申问题：css大小写
这里我们可以发现一个问题。在上面的代码中。class=blueblock 和greenblock这里，单词中间有大写字母。那么如果我们改成小写可以吗。换句话说，css对大小写敏感吗。答案是：使用了transitional类型声明的时候，大小写敏感，不使用transitional声明时，大小写不敏感。
本文稍有改动，原文摘自：http://blog.gishome.org/post-30.html
但是很奇怪，如果给块元素加一个
有人理解为：text-align只作用其中的inline元素，对block元素无效。
要想里面的div受作用，需要将它设置为inline元素，但是inline元素又不能设置height/width，所以可以给div加一个属性：
display:inline-block;
上例也可以验证给
body,div加一个属性：display:inline-block;则元素在ff与ie下都可以居中 
400-685-0732
