本文导读：一个元素在水平方向上所占的长度，由width ,padding ,和margin 决定。这些值中，只有width和margin-left，margin-right可以设为auto，text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置。

  margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！这就是水平居中的意思，使用 margin:0px auto; 也是大家在做css div定位时的最常用方法，但是在使用过程中，常有居中不了的情况，下面介绍几种不居中的情况。

    1: 与 margin:100px 混用，导致无法居中。　
　　　　　　　　　　　　
　这种情况下，因为前面设了margin:0px auto; 但是后面又设了margin:100px，这明显是相矛盾的，不仅如此，如果同时使用了margin:0px auto ; 和 float:left ，也一样都不生效。　

2: 没有指定DOCTYPE。　
　　　　　　　　　　
　DOCTYPE是指定浏览器以哪一种标准解析html代码，如果不指定，极有可能会不生效。　
　我们常见有人写html，是直接以<html>开头的，这种情况，我们只要再加上DOCTYPE头即可以，最好是直接从dw中新建一个html头，然后从中再做修改。完整的html头如下:　

 
HTML 代码   复制

<!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>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>无标题文档</title>


</head>


<body>


主题内容


</body>


</html>


　　

　　3:DOCTYPE前还有代码，导致不生效。　
　　　　　　　　　
　　在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　这一句前加了一个<!-- 说明文字 -->这样的注释，也同样出现了margin:0px auto;无法居中的情况。　　
　　　　

　 4、如果上面的几种方法还是不能够居中，则可以用 text-align:center
　 这是下下之策，如果上面margin:0px auto;用了怎么都不行，那到body中加上text-align:center;吧，如此一下不仅是div,文字也会居中显示。　　
　 然后可以再到细化的css中，把相应容器再设成text-align:left再达到文字靠左的效果。

　 使用 text-align:center; 居中时不能添加 doctype 声明，否则将不生效.

   5、width、margin-left、margin-right 三个属性各自设置成 auto 的区别：

三个属性均未设置为auto
　 当这三个属性都未被设置为auto时，margin-right总是会被强制设置为auto。这意味着margin-right会被设置成一个值以使框的七属性的值的总和达到父元素的width值。
　　
　 margin-left、margin-right被显式声明，width被设置为auto
　　
　 在这种情况下，width被设置为一个值以达到所需要的总宽度。
　　
　 margin-left、margin-right设置成auto，width显式设定。
　　
　 这样的话两个边界会被设置成各占50％的宽度，即相同的宽度。这样会使元素在其父元素中居中。
　　
　 一个边界显式设定，另一个边界和width设置为auto
　　
　 在这种情况下，设置为auto的边界会被强制的设置为0。而width则会设置成达到总需求所需要的值。
　　
　 三个属性均被设置为auto
　　
　 在这种情况下，两个边界会被设置为0，width设置为最大可能值。

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

text-align:center设置为文本或img标签等一些内联对象（或与之类似的元素）的居中。margin:0 auto是设置块元素（或与之类似的元素）的居中。

    三种情况需要说明：

　　一、有朋友在操作的时候，将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;}

margin auto 实现居中，与text-align:center的区别的更多相关文章

  1. day2-设置position:fixed/absolute无法使用margin:auto调整居中

    问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中 html代码如下: <div cl ...

  2. margin重叠现象与margin auto自适应居中

    上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ wid ...

  3. IE8 margin: auto 无法居中

    需要给body元素添加属性 body { text-align: center; width: 100%; } ok,可以正常居中.

  4. IE下div使用margin:0px auto不居中的原因

    IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用, ...

  5. 绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  6. IE8 margin:0 auto 不能居中显示的问题

    ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...

  7. div、ul、li等无法居中问题，text-align无效 margin auto无效

    很简单.如果是div,直接把div换成: <table align="center">        <tr>            <td> ...

  8. table居中方法之一：设置width，然后为style设置margin:auto

    比如: <table width="800px" style="margin:auto;">

  9. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

随机推荐

  1. Java 使用 happen-before 规则实现共享变量的同步操作

    前言 熟悉 Java 并发编程的都知道,JMM(Java 内存模型) 中的 happen-before(简称 hb)规则,该规则定义了 Java 多线程操作的有序性和可见性,防止了编译器重排序对程序结 ...

  2. 一张 JVM 相关的思维脑图（4.4M）

    楼主学习 JVM 总结的知识点,用思维脑图串起来,温故而知新,其中含有类加载器,内存布局,GC(右侧). 最多的就是 GC 的内容了. 内容有错误之处,还请指正. 大图地址

  3. Layui 获取 radio的值

    var OutInvoiceType = $('#OutInvoiceType input[checked]').val();   就可以获取到了.

  4. 微信公众号开发--.Net Core实现微信消息加解密

    1:准备工作 进入微信公众号后台设置微信服务器配置参数(注意:Token和EncodingAESKey必须和微信服务器验证参数保持一致,不然验证不会通过). 2:基本配置 设置为安全模式 3.代码实现 ...

  5. 用HTML，Vue+element-UI做桌面UI

    DSkin封装的WebUI开发模式开发桌面应用,使用Vue很方便.使用起来有点像WPF 下面用 element-UI 做个简单的例子. 运行效果:可以自己根据需求改布局效果. 主框架的element- ...

  6. [PHP] 算法-合并两个有序链表为一个有序链表的PHP实现

    合并两个有序的链表为一个有序的链表: 类似归并排序中合并两个数组的部分 1.遍历链表1和链表2,比较链表1和2中的元素大小 2.如果链表1结点大于链表2的结点,该结点放入第三方链表 3.链表1往下走一 ...

  7. 【Java深入研究】6、CGLib动态代理机制详解

    一.首先说一下JDK中的动态代理: JDK中的动态代理是通过反射类Proxy以及InvocationHandler回调接口实现的 但是,JDK中所要进行动态代理的类必须要实现一个接口,也就是说只能对该 ...

  8. 【Spring】14、SpringMVC拦截器的配置

    拦截器: com.zk.interceptors.MyInterceptor 实现了 HandlerInterceptor接口,可以拦截@RequestMapping注解的类和方法 第一种方式 < ...

  9. Flask 中的 特殊装饰器before_request/after_request

    before_request :在请求收到之前绑定一个函数做一些事情. after_request: 每一个请求之后绑定一个函数,如果请求没有异常. teardown_request: 每一个请求之后 ...

  10. spring boot （1）：初尝

    工具:intellij idea 自定义banner: 控制台console显示的banner 自定义方式,在src/main/resources 下创建banner.txt增加文本即可,生成字符网站 ...