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

1:没有设置宽度。margin:0 auto居中是要设置宽度滴。

2:没声明DOCTYPE
DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!当然现在很多web编辑器都会自动声明doctype。(不要告诉我你还在用文本编辑器。。。)

3:margin:0 auto 是对块级元素才起作用的。有可能你是对行内元素(比如<a><span><input>等)居中,这时候给它的display:block | inline-block,然后添加宽度就ok了哦。

4:将此元素添加了浮动或者定位:它通常只对静态元素(无浮动、无定位)起作用

浮动:脱离当前的文档流,变换到容器的边缘,或是另一个浮动box的边缘,若空间不够则向下移动直到可以放下

转载于:https://www.cnblogs.com/momozjm/p/5707063.html

css中margin:0 auto没作用相关推荐

  1. html中auto是设置什么的,css中margin:auto什么意思?margin:auto属性的用法详解

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

  2. CSS中:margin和padding的区别 margin:auto与margin: 0 auto区别

    css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...

  3. html5中margin是什么意思,css中margin是什么意思,margin作用是什么?

    一.介绍,什么意思? margin为对象外边距间隔属性.如果对一个对象比如div设置了边框后,再设置margin就会观察到这个div外面产生了间距边距. margin作用: 设置对象与其它对象的外边距 ...

  4. html设置margin无效,CSS中margin不起作用的原因及解决方法

    margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因 对于初学者来说,可能会经 ...

  5. css margin属性 auto,css中margin:auto属性的使用方法

    css中margin:auto属性的使用方法 发布时间:2020-06-25 10:53:17 来源:亿速云 阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...

  6. margin: 0 auto;的作用

    在html中,为什么我们设置一个margin: 0 auto;就可以使得块元素居中? <!DOCTYPE html> <html lang="en"> &l ...

  7. C语言margin的作用是,css中margin是什么意思,margin作用是什么

    一.简介,甚么含义? margin为对象外边距间隔属性.假如对一个对象比方div配置了边框后,再设置margin就会察看到这个div外面孕育发生了间距边距. margin感导: 设置对象与此外对象的外 ...

  8. [css] 怎么IE6下在使用margin:0 auto;无法使其居中?

    [css] 怎么IE6下在使用margin:0 auto;无法使其居中? 浏览器解析的问题,IE6下需要对居中的元素设置text-align:center属性使其margin:0 auto;生效. 个 ...

  9. text-align:center 和margin:0 auto的区别

    基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;   该属性通过指定行框与哪个点对齐,从而设置块级元素内文本水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性.支持值 ...

最新文章

  1. 利用c语言检测气体浓度,一氧化碳气体检测仪的算法设计
  2. [java]OutOfMemoryError 原因及解决办法
  3. Spring Boot-@EnableWebMvc注解
  4. python标准库math用来计算平方根的函数_《Python程序设计方案》题库
  5. generator 和 yield的使用
  6. CF650E Clockwork Bomb(树上构造类问题、并查集)
  7. 旅游系统_数字洛江智慧旅游系统助力提升旅游安全水平
  8. blender视图缩放_如何使用主视图类型缩放Elm视图
  9. 计算机二级考试试题在线看,【TOP182015年全国计算机二级考试试题题库.doc文档免费在线阅读材料】...
  10. 临时表和游标的使用小总结
  11. 解决chrome浏览器崩溃,再次安装不上问题
  12. 十-二进制数的最少数目
  13. Android开发 MediaPlayer入门_播放本地视频
  14. HTML中图片文件名字有括号,文件批量顺序重命名去掉括号
  15. 关于int型最大值最小值的思考
  16. MessageCenterUI.exe - 无法找到入口 无法定位程序输入点
  17. 您全面了解“含胸拔背”吗?
  18. 施耐德plc使用施耐德触摸屏设置
  19. ModelMapper 的高级使用
  20. 职称以考代评学院考计算机吗,软考与职称的关系,软考是以考代评,不用另外再去评审...

热门文章

  1. 入门机器学习(七)--神经网络
  2. 机器学习实战4-sklearn训练线性回归模型(鸢尾花iris数据集分类)
  3. Vue (响应式原理-模拟-3-Compiler)
  4. 7-183 阅览室 (20 分)
  5. php curl密码控件,检索通过curl传递的用户名,密码参数 - php
  6. ssm+maven+eclipse框架搭建
  7. luogu Cantor表
  8. 正则表达式替换和不包含指定字符串
  9. Android下结束进程的方法
  10. 诗与远方:无题(二十五)