前言

margin:0px auto;适用于指定了固定宽度的div与其它元素，比如p,img等，使用 margin:0px auto，居中是大家在做css div定位时的最常用方法，但是据我自己的使用过程来看，常有居中不了的情况。

与 margin:100px 混用，导致无法居中

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

没有指定DOCTYPE

　　DOCTYPE是指定浏览器以哪一种标准解析html代码，如果不指定，极有可能会不生效。

　　我们常见有人写html，是直接以<html>开头的，这种情况，我们只要再加上DOCTYPE头即可以，最好是直接从dw中新建一个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>

DOCTYPE前还有代码，导致不生效

　　我试了一下，只要在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句前加了一个<!-- 说明文字 -->这样的注释，也同样出现了margin:0px auto;无法居中的情况。

使用text-align:center

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

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

　　还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时还不一样，其原意可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。

css————关于margin:0px auto的几个居中问题的更多相关文章

  1. css中设置div水平居中，margin:0px auto无用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0.左右依据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

  2. css中设置div水平居中，margin:0px auto没用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0,左右根据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

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

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

  4. margin:0px auto和text-align:center区别

    (1)margin:0px auto :作用于块级元素,对块级元素进行居中 (2)text-align:center:作用于内联元素,必须放在要居中的内联元素所在的块级元素. 例: (1) <d ...

  5. margin: 0px auto; center 行类 块级

    <html> <head> <title> biaoti </title> </head> <body style="bor ...

  6. CSS中margin: 0 auto；样式没有生效

    问题:有两个元素: A, B.两则是嵌套关系,A是B的父节点.A和B都是块元素.当在A上设置:margin: 0 auto的时候,B并没有在页面中居中. margin: 0 auto 为什么没有生效? ...

  7. CSS中margin：auto什么意思？margin：auto属性的用法详解

    我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...

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

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

  9. css中margin:0 auto没作用

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

随机推荐

  1. POJ2513:Colored Sticks(字典树+欧拉路径+并查集）

    http://poj.org/problem?id=2513 Description You are given a bunch of wooden sticks. Each endpoint of ...

  2. Java特殊数据结构-TreeSet

    资料来源 TreeSet初步入门总结 https://www.cnblogs.com/yzssoft/p/7127894.html TreeSet自然排序与比较器排序精讲 https://blog.c ...

  3. 部署Hadoop-3.0-高性能集群

    一.Hadoop概述: Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop的框 ...

  4. Scrapy+redis实现分布式爬虫

    概述 什么是分布式爬虫 需要搭建一个由n台电脑组成的机群,然后在每一台电脑中执行同一组程序,让其对同一网络资源进行联合且分布的数据爬取. 原生Scrapy无法实现分布式的原因 原生Scrapy中调度器 ...

  5. Java泛型(1)：概述

    通常而言,我们使用一种容器来存储一种类型的对象.而泛型的主要目的之一就是用来指定这个容器要持有什么类型的对象.因此,与其使用Object,我们可以暂时不指定类型. 看下面3个例子: (1) 我们有时候 ...

  6. UniEAP UTF 用户手册 （引擎）

    目录 第1章 概述 5 1.1 术语解释 5 第2章 测试文件组织 6 2.1 测试执行文件详解 7 2.1.1 参数配置 7 2.1.2 测试报告配置 9 2.1.3 浏览器类型配置 9 2.1.4 ...

  7. maven-tomct插件

    依赖 <dependency> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomca ...

  8. C#中Math方法总结

    名称  说明      E  表示自然对数的底,它由常数 e 指定.    PI  表示圆的周长与其直径的比值,它通过常数 π 指定. Abs  已重载.返回指定数字的绝对值.      Acos   ...

  9. IDEA 2019.2破解激活教程(激活到2089年8月，亲测有效，持续更新中...)

    本来笔者这边是有个正版激活码可以使用的,但是,2019.9月3号的时候,一些小伙伴反映这个注册码已经失效了,于是拿着自己的 IDEA, 赶快测试了一下,果不其然,已然是不能用了. 好在,笔者又找到了新 ...

  10. C#规范整理·资源管理和序列化

    资源管理(尤其是内存回收)曾经是程序员的噩梦,不过在.NET平台上这个噩梦似乎已经不复存在.CLR在后台为垃圾回收做了很多事情,使得我们现在谈起在.NET上进行开发时,都会说还是new一个对象吧!回收 ...