前言

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. 一次galera cluster集群故障节点无法启动问题排查

    现象 环境: Server version: 10.0.25-MariaDB-wsrep MariaDB Server, wsrep_25.13.raf7f02e 配置文件: [root@node-2 ...

  2. css 添加一个图标始终保持在pc端的右下角

    <div class="dialog_maxdiv" style="display:block;"> <div id="center ...

  3. [spring mvc][转]<mvc:default-servlet-handler/>的作用

    优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...

  4. 时间复杂度O(n)

    时间复杂度 算法分析 同一问题可用不同算法解决,而一个算法的质量优劣将影响到算法乃至程序的效率.算法分析的目的在于选择合适算法和改进算法.一个算法的评价主要从时间复杂度和空间复杂度来考虑. 一.时间复 ...

  5. StringJoiner,StringBuffer的一些lamada写法

    public String friendlyText(List data) { if(CollectionUtils.isEmpty(data)) { return "[]"; } ...

  6. 手写web框架之加载Controller，初始化框架

    1,加载Controller     我们需要创建 一个ControllerHelper类,让它来处理下面的逻辑:      通过ClassHelper我们可以获取所有定义了Controller注解的 ...

  7. php获取服务器ip方法

    public static function getServerIp() { if(!empty($_SERVER['SERVER_ADDR'])) { return $_SERVER['SERVER ...

  8. vue是一个渐进式的框架，我是这么理解的

    vue是一个渐进式的框架,我是这么理解的 原文地址 时间:2017-10-26 10:37来源:未知 作者:admin 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主 ...

  9. pandas中对日期型数据进行处理

    因为数据不方便展示,直接上代码. 将字符串转为datetime64[ns]格式: pd.to_datetime('2019-12-20') or pd.to_datetime('20191220') ...

  10. 安装多个版本的TensorFlow

    TensorFlow 2.0测试版在今年春季发布,新版本比1.x版本在易用性上有了很大的提升.但是由于2.0发布还没有多久,现在大部分论文的实现代码都是1.x版本的,所以在学习TensorFlow的过 ...