前言

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. C++中.cpp和.hpp的区别

    原文地址:https://blog.csdn.net/qzx9059/article/details/89210571 c++中 cpp和hpp我们可以将所有东西都放在一个.cpp文件内,编译器会将这 ...

  2. 找不到FileProvider类怎么办?找不到R资源怎么办?APPT2错误怎么办?

    坑2: 在使用上述解决方案时,需要加入android.support.v4.content.FileProvider这个类,当时我没有这个包.但是在引入相应的依赖包后,各种异常就出现了. 先是把And ...

  3. 适用于hips ui的iPhoneX及以上适配方案

    版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...

  4. kubernetes介绍(1)

    一.Kubernetes 介绍: kubernetes起源 Kubernetes (K8s) 是 Google 在 2014 年发布的一个开源项目. 据说 Google 的数据中心里运行着超过 20 ...

  5. 在SuSE安装wifidog认证服务器和网关

    在SuSE安装认证服务器和网关 在openSuSE 10.3安装wifidog 认证服务器和网关在同台设备中安装完毕.以下是openSuSE的详细安装指南.这个安装是非常初级的,所以请验证或更正. - ...

  6. Linux命令集锦:ansible命令

    ansible 命令主要用于批量管理,来实现自动化管理.常用批量操作包括:主机分组管理.实时批量执行命令或脚本.实时批量分发文件或目录.定时同步文件等. 一.安装 ansible yum instal ...

  7. eclipse创建项目(步骤加图片)

    前言: 我曾经大学的专业是计算机科学与技术,但不曾想着走入计算机的世界,看着代码就眼晕. 为了自动化测试,不得被迫认识一下java. 1)       打开Eclipse,界面是这样的: 2)     ...

  8. node 笔记整理

    node 合并多个请求的数据 function getList1(num) { var url= "netease/search?keyword=独孤天下&type=song& ...

  9. SLC cache功能

    由于TLC需要多次编程,且未全部编程时wordLine处于不稳定状态,所以一般都会划出一部分区域作为SLC cache使用 SLC cache主要功能是,SSD接收到写命令后,先将数据写入SLC ca ...

  10. C#中的接口和抽象类学习

    今天学习了接口和抽象类,但并没有很好的进行整理,所以现在写的时候,脑子里多少有点乱乱的,先从接口开始吧. interface 接口,规定了所有派生类的需要遵循的标准,接口定义了需要做些什么,但是没有具 ...