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. jq定时器

    1.$(function(){ setInterval (showTime, 2000); function showTime(){ var today = new Date(); alert(&qu ...

  2. Spring mvc 字节流

    public static void responseDownloadFile(HttpServletRequest request, HttpServletResponse response, Fi ...

  3. scala（一）方法&函数

    写在前面 众所周知,scala一向宣称自己是面向函数的编程,(java表示不服,我是面向bean的编程!)那什么是函数? 在接触java的时候,有时候用函数来称呼某个method(实在找不出词了),有 ...

  4. HTML中table的td宽度无法固定问题

    设置了 width="10%" 依然会被内容撑大, 加了 style="word-break:break-all;" 属性就好了.效果是内容自动回车. 此属性不 ...

  5. Maven 一段时间知识小结2

    父 Pom.xml <parent> <groupId>org.springframework.boot</groupId> <artifactId>s ...

  6. java -d . **.java 与 java **.java 的区别

    如何在命令行模式下运行带包的java文件 https://blog.csdn.net/lytor/article/details/17048361 javac,使用"-d ."与省 ...

  7. Linux Shell参数替换

    Linux Shell参数替换 2013-06-03 10:01 by 轩脉刃, 1816 阅读, 0 评论, 收藏, 编辑 Bash中的符号的作用是参数替换,将参数名替换为参数所代表的值.对于 来说 ...

  8. RabbitMQ 之 订阅模式 Publish/Subscribe

    模型图 我们之前学习的都是一个消息只能被一个消费者消费,那么如果我想发一个消息 能被多个消费者消费,这时候怎么办? 这时候我们就得用到了消息中的发布订阅模型 在前面的教程中,我们创建了一个工作队列,都 ...

  9. [转载]在sublime中运行Java代码

    1.设置java的PATH环境变量 2.创建批处理或Shell脚本文件 runJava.bat: 将该文件复制到JDK的bin目录下. @echo off cd %~dp1 echo Compilin ...

  10. 浏览器DOM操作

    HTML Node 节点 常用API 高效遍历 DOM Repaint and reflow 插入大量内容避免重绘和回流 style 样式操作 DOM事件 HTML - innerHTML:内部HTM ...