body{text-align:center}与margin:0 auto的异同？

text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置

我们设置某个对象水平方向居中的时候，常常将左右的外边距设置为auto来实现

text-align:center设置为文本或img标签等一些内联对象（或与之类似的元素）的居中。margin:0 auto是设置块元素（或与之类似的元素）的居中。但这两个属性IE与FF的理解也有所不同。

　　我们设置一个段落P，在段落内存在一个图片img标签。
　　我们设置body{text-align:center;}，在IE中，段落P，图片img同时实现了居中对齐，也就是说text-align:center;同时作用于元素p与元素img。
　　在FF中，段落P，没有能实现居中对齐，而图片img实现了居中对齐，也就是说text-align:center;作用于img标签，而段落p标签没有起到居中的作用。

　　我们设置段落 p {margin:0 auto;}。我们发现在IE与FF中，段落P均实现了居中对齐。图片img由于不是作用对象，所以不会居中对齐。

有三种情况需要说明：

　　一、有朋友在操作的时候，将margin:0 auto;的选择器混淆了，应该是作用对象，如div，p，而不是body。如果设置：body { margin:0 auto; }将不会达到任何效果，除非你定义body的宽度，那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置，我们最大化窗口将会看到段落并非处于窗口的最左上角。

　　二，我们设置段落 p {text-align:center;} 将要实现的并不是段落本身的对齐方式，而是段落内元素居中对齐。

　　三，我们设置图片标签img {margin:0 auto;} ，我们就犯了一个小错误，img类于内联对象，不可以设置图片img标签的margin属性，如果你一定想要设置，那么首先要将它的属性转变为块元素，如下面的代码：img {display:block; margin:0 auto;}

如果页面中的元素，均位于div标签或其它块元素内，进行了合理的嵌套，我们不必设置body{text-align:center}。只需要设置相应的div元素margin:0 auto;即可。如上面的代码所讲述，页面中的元素均位于段落p标签中，只需要将段落居中即可。

　　如果页面中的元素，有一部分不是在div标签或其它块元素内，我们需要设置body{text-align:center}。但也会遇到问题，这样设置以后，大部分内联元素，都居中对齐了，包括页面中其它的一些文本，还需要进行相应的调整才能适应设计的需要。如：我们设置body内有一个段落P，在段落内有一个图片img及一段文本，在body内还存在一个独立的图片img。

我们实现了段落p的居中，同时也让位于段落外的图片实现了居中，但段落中的图片与文本居中对齐了。

比如代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.51qqdm.cn</title>
<style type="text/css">
body {
    text-align:center;
}
p {
    margin:0 auto;
    width:300px; 
    background:#06f; 
}
img {

}
</style>
</head>
<body>
<p>
<img src="http://www.51qqdm.cn/imges/logo.gif" alt="51qqdm.cn - CSS Web Design" width="200" height="90" style="vertical-align:top;" />
<br />
一个专业的CSS学习站点，内容丰富并且保持每天更新，我们建立了很多QQ群供网友们互动讨论学习，学习开发符合WEB标准的网页及网站重构。 
</p>
<br />
<img src="http://www.51qqdm.cn/imges/logo.gif" alt="51qqdm.cn- CSS Web Design" width="200" height="90" style="vertical-align:top;" />
</body>
</html>

正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）的更多相关文章

  1. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

  2. margin:0 auto在IE中失效的解决方案

    转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...

  3. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  4. margin:0 auto;不居中

    margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...

  5. margin:0 auto 与 text-align:center

    1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;            text-align:center 设置文本或img标签等一些内联对象的居中. 2.m ...

  6. margin:0 auto 与 text-align:center 的区别

    基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;   该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;  一般情况下设置文本对齐方式的时使用此属性.支 ...

  7. IE下margin:0 auto为什么不居中？

    http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...

  8. html页面docutype前面出现字符会导致IE678 margin:0 auto;失效

    html页面<!DOCTYPE html>前面出现字符会导致IE678 margin:0 auto;失效

  9. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

随机推荐

  1. jquery post 同步异步总结[转]

    1.post被请求多次,解决方法: 连接加入随机数 rand=""+Math.random() $.post("/Control/webControl.ashx?rand ...

  2. 初入spring boot（八 ）Spring Data REST

    1. 什么是Spring Data REST Spring Data JPA是基于Spring Data 的Repository之上,可以将Repository自动输出为REST资源.目前Spring ...

  3. Mac Homebrew安装php56 到phpstorm过程问题汇总

    Mac自带版本是php5.5,本来是用homebrew安装xdebug 命令:brew install php55-xdebug 但是安装之后使用phpstorm还是有问题.php -v 并没有显示有 ...

  4. git pull 分支问题

    问题: 是因为本地分支与远程分支没有链接关系, 让他们建立链接关系

  5. nodejs 备忘

    引入模块(在于你用什么模块,需要的模块可以用终端进行安装, npm,一般express,swig,body-parser,cookies,markdown) 设置模块 设置渲染 var express ...

  6. jquery validate检验

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Android 版本升级涉及到的数据库数据迁移问题

    最近做老版本向新版本升级,新版本增加了几张表,有的表经过了增加字段.那么如何把老的数据迁移到新的版本里呢? 我写了一段伪代码,是关于我们项目里的 用户登录信息 Users表,    历史表histor ...

  8. IOS UI-瀑布流（UICollectionView）

    ViewController.m // // ViewController.m // IOS_0227_瀑布流 // // Created by ma c on 16/2/27. // Copyrig ...

  9. ubuntu下自动备份mysql数据库

    转载自:Mayi mysql的安装目录为:/var/lib/mysql 下面咱们来一起完成自动备份mysql. 备份目录为:/home/mydb 并且在每天下午18:30分以mysqldata_201 ...

  10. lr设置监控本地和远程windows系统资源

    LoadRunner之设置监控本地和远程Windows系统资源   一般在客户端通过LoadRunner对服务器进行压力测试,都需要实时监控服务器端的系统资源,本篇主要简单介绍一下如何设置在LoadR ...