前言

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. Mac下持续集成-Mac下Tomcat+Jenkins集成环境搭建

    一.MAC安装jdk及环境变量配置 1)访问Oracle官网 http://www.oracle.com,浏览到首页的底部菜单 ,然后按下图提示操作: 2)下载完成后点击安装包,按提示即可完成安装. ...

  2. Java之分布式事务TCC

    看这个博客吧! 挺好的. 理论:https://www.cnblogs.com/jajian/p/10014145.html 实践:https://www.cnblogs.com/sessionbes ...

  3. AngularJS 指令（Directivce ）一

    指令(Directive),是AngularJS中一块比较重要的内容,在实践中,我们提倡将控制器(Controller)写得短小精悍,逻辑代码尽量少,要实现这种目的,我们主要通过将逻辑代码抽取到服务( ...

  4. openstack部署cinder

    controller 一.创建cinder数据库并设置权限 mysql -u root -p    CREATE DATABASE cinder;    GRANT ALL PRIVILEGES ON ...

  5. EF中where中日期帅选问题

    结合 SqlFunctions  和 DbFunctions  不能同时用两个DbFunctions queryAble = queryAble.Where(s=> SqlFunctions.D ...

  6. vue项目在（windowServer）nginx上的部署

    (一) 本地部署. 1.下载phpStudy (http://phpstudy.php.cn/) 2.安装到自己指定盘根目录的文件夹目录,安装完后会用到. 3.运行phpStusy可能报错,需要下载安 ...

  7. SpringSecurity快速入门

    作者:SingleXu 链接:https://www.jianshu.com/p/8212a559d633 来源:简书 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 简介 Sp ...

  8. Spring Boot开发Web应用之JSP篇

    前言 上一篇介绍了Spring Boot中使用Thymeleaf模板引擎,今天来介绍一下如何使用SpringBoot官方不推荐的jsp,虽然难度有点大,但是玩起来还是蛮有意思的. 正文 先来看看整体的 ...

  9. JAVA 程序员代码生成利器

     http://www.grails.org/ 为什么要用Grails 采用groovy 开发,基于springboot+ hibernate ,groovy 语言层面运行效率稍微差点,但开发效率比j ...

  10. ASP.NET Core 入门笔记3，使用ASP.NET Core MVC框架构建Web应用

    一.ASP.NET Core MVC 输出Hello World,Friend! 1.引入 ASP.NET Core MVC 修改应用启动类(Startup.cs),引入MVC模块并配置默认路由 pu ...