前言

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. GitHub代码下载和同步

    1.下载git客户端https://git-scm.com/ssh-keygen -C "your@email.address" -t rsa 2. 把下面文件的内容复制到 htt ...

  2. [hibernate]save()与persist()区别

    Hibernate 之所以提供与save()功能几乎完全类似的persist()方法,一方面是为了照顾JPA的用法习惯.另一方面,save()和 persist()方法还有一个区别:使用 save() ...

  3. JAVA反射机制，总结下

    1.总体概述 Java反射机制指的是在Java程序运行状态中,对于任何一个类,都可以获得这个类的所有属性和方法:对于给定的一个对象,都能够调用它的任意一个属性和方法.这种动态获取类的内容以及动态调用对 ...

  4. 部署k8s时容器中ping不通

    192.168.42.120 | UNREACHABLE! => {    "changed": false,     "msg": "Fail ...

  5. kettle mogodb output详解

    以下主要来自官网文档,原文:https://wiki.pentaho.com/display/EAI/MongoDB+Output Configure Connection Tab 1 Host na ...

  6. IIS 7 实现http跳转https 重定向方法

    官网的域名申请了一个SSL加密,导致原来的http无法访问了,网上找了一下解决方案,https://www.cnblogs.com/wer-ltm/p/10190535.html  按照这个方法进行了 ...

  7. 哈希算法MD5和SHA1的C#实现

    /* * 哈希算法MD5和SHA1的C#实现 *  *  * 夏春涛 Email:xChuntao@163.com  * Blog:http://bluesky521.cnblogs.com * 运行 ...

  8. android#boardcast#广播实现强制下线功能

    参考自<第一行代码>——郭霖 强制下线功能需要先关闭掉所有的活动(Activity),然后回到登录界面.先创建一个ActivityCollector类用于管理所有的活动,代码如下所示: p ...

  9. 随便写的Gost安装脚本，作用你懂的，目前只支持CentOS，可以在Aliyun ECS中使用

    服务器 执行下面命令: curl -L aux.pub/gost | bash 或者: curl -L https://gist.githubusercontent.com/inrg/03da1ded ...

  10. echarts图例的位置及大小，环图中间字

    https://blog.csdn.net/qq_34790644/article/details/89308738 Echarts饼状图属性设置大全 https://blog.csdn.net/sl ...