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. LeetCode——3Sum

    1. Question Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? ...

  2. codeforces Round#429 (Div2)

    2017-08-20 10:00:37 writer:pprp 用头文件#include <bits/stdc++.h>很方便 A. Generous Kefa codeforces 84 ...

  3. [小问题笔记（三）] SVN树冲突（Tree Conflict），文件不能提交的解决办法

    传说中SVN的树冲突是由不同开发者删除文件,移动文件神马的造成的. 我们遇到的情况是: 开发人员小B移动了项目中几个文件然后提交.开发人员小L更新项目至最新版本. 获取到移动后的文件则显示文件已被修改 ...

  4. 关于MAC升级后，vim更新插件报错

    找不到路径: 直接在终端 terminal 输入: xcode-select --install

  5. SpringBoot学习（1）

    内容概要: spring data springboot是spring团队基于spring4开发的一个框架. springboot来简化spring应用开发,约定大于配置,去繁从简,just run就 ...

  6. [spring]xml配置文件中bean属性的两种写法（p:configLocation <=> <property name="configLocation"/>）

    1.当作bean节点的属性:p:configLocation: <!-- mybatis文件配置,扫描所有mapper文件 --> <bean id="sqlSession ...

  7. mysql数据库优化课程---14、常用的sql技巧

    mysql数据库优化课程---14.常用的sql技巧 一.总结 一句话总结:其实就是sql中那些函数的使用 1.mysql中函数如何使用? 选择字段 其实就是作用域select的选择字段 3.转大写: ...

  8. linux正则表达式回忆记录

    好久没用linux grep相关正则表达式,现在简单记录下. grep简介 grep 是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.通常grep有三种版本grep.egr ...

  9. ContentPresenter元素

    一个内容控件 分解它的“结构树”,肯定能够看到ContentPresenter“元素”,该元素的功能:用来为“内容控件”显示“Content”

  10. 《深入理解mybatis原理3》 Mybatis数据源与连接池

    <深入理解mybatis原理> Mybatis数据源与连接池 对于ORM框架而言,数据源的组织是一个非常重要的一部分,这直接影响到框架的性能问题.本文将通过对MyBatis框架的数据源结构 ...