美文网首页
margin:0 auto;水平居中不生效的几个原因

margin:0 auto;水平居中不生效的几个原因

作者: Bior | 来源:发表于2020-04-17 16:11 被阅读0次

在平时写网页的时候可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果。margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应。以达到水平居中的效果。在此介绍几种可能造成margin:0 auto;不起作用的原因:

1、没有设置宽度

  <div style="margin:0 auto;"></div>

看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题!

2、使用可float属性

无论float:left和float:right都不能使用。

3、没声明DOCTYPE

DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4、IE浏览器解决margin:0 auto;不居中的方法

在<body>或者在要居中的div外层添加多一个div,并使其居中

例如:

  <style type="text/css">

    #con{width:980px;martin:0 auto;}

  </style>

  <div style=“text-align:center”>
        <div id="con">margin: 0 auto 内容居中显示</div>
   </div>

相关文章

  • margin:0 auto;水平居中不生效的几个原因

    在平时写网页的时候可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果。margin...

  • 关于居中

    1.水平居中的 margin:0 auto; a.图片设为块级,margin:0 auto; b.不浮动 ...

  • CSS:垂直+水平居中/单位in

    水平+垂直居中:display: flex 布局下, margin auto 的生效不仅是水平方向,垂直方向生效。...

  • 浏览器对宽高的理解 水平居中对齐 发现不生效

    在设置水平居中对齐时:margin:0 auto;发现不生效。原来是父级元素没有设置宽度。 父元素没有设置宽度,那...

  • html,css篇

    一.水平垂直居中 1.水平居中 ①margin:0 auto; 2.垂直居中 ①li...

  • 让元素绝对居中

    我们都知道margin:0 auto;的样式可以让元素水平居中,但是margin:auto;却不能让元素垂直居中,...

  • CSS 小知识点

    background包含border margin:0 auto;左右居中 margin:auto 0;垂直居中 ...

  • CSS居中的几种方式

    1.水平居中的 margin:0 auto; 2.水平居中 text-align:center; 3.水平垂直居中...

  • CSS小技巧

    1.元素水平居中 内联元素水平居中text-align:center; 块元素水平据居中margin:0 auto...

  • css居中

    1:margin: 0 auto;水平居中 2:html, body { width: 100%; height:...

网友评论

      本文标题:margin:0 auto;水平居中不生效的几个原因

      本文链接:https://www.haomeiwen.com/subject/mksyvhtx.html