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. LDA学习之beta分布和Dirichlet分布

    ---恢复内容开始--- 今天学习LDA主题模型,看到Beta分布和Dirichlet分布一脸的茫然,这俩玩意怎么来的,再网上查阅了很多资料,当做读书笔记记下来: 先来几个名词: 共轭先验: 在贝叶斯 ...

  2. 01_MySQL DQL_基础查询

    DQL,Data Query Language,数据查询 # 基础查询/*语法:select 查询列表 from 表名: 特点:1.查询列表可以是:表中的字段,常量值.表达式.函数,也可以是多个组合2 ...

  3. Jenkins-Kubernetes-docker-自动发布

    使用的是Jenkins pipeline: 这里只是做了更新,没有创建,没有借助helm等工具,先用着,以后再研究. pipeline { agent any stages { stage(" ...

  4. webjars-jquery的引用

    什么是WebJars WebJars以jar包的形式来使用前端的各种框架.组件,如jquery.bootstrap WebJars将客户端(浏览器)资源(JavaScript,Css等)打成jar包文 ...

  5. MySQL-性能优化-优化设计和设计原则

    MySQL性能优化目的如何合理的设计数据库?什么样的数据库设计才能给后期DBA优化提供基石? 数据库设计与程序设计的差异? 数据库设计早期优化1. 关系明确(理清表之间的关系,可以通过冗余的方式提高效 ...

  6. Session存储

    session其实分为服务器端Session和客户端Session. 当用户首次与Web服务器建立连接的时候,服务器会给用户分发一个sessionid作为标识.用户每次提交页面,浏览器都会把这个ses ...

  7. cJSON序列化工具解读一（结构剖析）

    cJSON简介 JSON基本信息 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.易于人阅读和编写.同时易于机器解析和生成.是一种很好地数据交换语言. 官方 ...

  8. 第五章 如何使用Burp Target

    Burp Target 组件主要包含站点地图.目标域.Target 工具三部分组成,他们帮助渗透测试人员更好地了解目标应用的整体状况.当前的工作涉及哪些目标域.分析可能存在的攻击面等信息,下面我们就分 ...

  9. SPOJ KPSUM ★(数位DP)

    题意 将1~N(1<=N<=10^15)写在纸上,然后在相邻的数字间交替插入+和-,求最后的结果.例如当N为12时,答案为:+1-2+3-4+5-6+7-8+9-1+0-1+1-1+2=5 ...

  10. [转载]java实现word转pdf

    最近遇到一个项目需要把word 转成pdf,百度了一下网上的方案有很多,比如虚拟打印.给word 装扩展插件等,这些方案都依赖于ms word 程序,在java代码中也得使用诸如jacob或jcom这 ...