`
kabike
  • 浏览: 608586 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

margin: 0px auto与居中

    博客分类:
  • html
css 
阅读更多
代码如下
.cen {
	margin: 0px auto;
	border: 1px red solid;
}
</style>
</head>
<body>
	<div class="cen">aaa</div>
</body>


发现div并没有居中显示,原因是它的width没有设置,默认值为auto.
而CSS规范中说

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

我猜它的意思是如果width是auto,那么其他的auto会设为0,然后width设为最大宽度.
PS: follows from the resulting equality.真心理解不了....

所以上面那个例子中,div没居中显示.
解决方法要看究竟是想div居中,还是div里面的字居中

div居中
.cen {
	margin: 0px auto;
	border: 1px red solid;
	width: 300px;
}


div的内容居中
.cen {
	margin: 0px auto;
	border: 1px red solid;
	text-align: center;
}


分享到:
评论

相关推荐

    div使用margin:0px auto不居中的原因分析及解决

    `margin: 0px auto` 是一个经常被用来实现水平居中的CSS属性组合,它适用于块级元素,通过设置左右外边距为自动来达到居中效果。然而,在某些情况下,尤其是在IE浏览器中,这种方法可能无法正常工作。本篇文章将深入...

    通过margin:0px auto来实现一列固定宽度居中

    复制代码代码如下: XHTML CODE: ”layout”&gt;一列固定宽度居中&lt;/div&gt; CSS CODE: 复制代码代码如下: #layout{ background-color:#C7E091; border:2px solid #B0BCA6;... margin:0px auto;/*外边距参数*/ }

    css中margin:0 auto居中问题深入探讨

    而在水平居中时,我们只需要设置`margin-left`和`margin-right`为`auto`,通常可以通过简写`margin: 0 auto;`来实现。 但在某些情况下,当`margin-top`不为零时,可能会出现一些意外的效果。这是因为`margin-top`和...

    XHTMl 第三章源代码

    margin:0px auto 0px auto; width:800px; text-align:left; background:url(container_bg.jpg) no-repeat bottom right; /* 底部右侧的背景图片 */ } #globallink{ width:800px; height:430px; margin:0px; ...

    css margin:0 auto居中

    在提供的代码示例中,有一个内部的红色方块`div`,其宽度为50px,通过`margin: 0 auto`设置,尝试在外部的灰色背景`div`中居中。然而,如果缺少合适的文档类型声明(DOCTYPE),某些浏览器可能进入怪异模式,导致CSS...

    01拓展-居中方式.pptx

    本文将详细介绍居中方式的实现方法,包括绝对定位、flex布局、margin:auto等多种方法。 一、 绝对定位的盒子居中 在CSS中,我们可以使用绝对定位来实现盒子的居中。下面是一个简单的示例代码: ```css div { ...

    CSS网页布局入门教程3:一列固定宽度居中

    在我们的示例代码中,我们将使用margin: 0px auto; 来实现居中。这里的auto值是让浏览器自动判断边距,浏览器就会将div的左右边距设为相当,并呈现为居中状态。 接下来,让我们来看一下完整的示例代码: ```html ; ...

    CSS中使用text-align、margin:0 auto居中的示例代码

    总结来说,通过text-align属性可以简单地实现内联元素或内联块级元素的水平居中,而要实现块级元素的居中,则需要使用margin: 0 auto;方法,并确保块级元素具有宽度属性。这两种方法都是CSS布局中的基础技术,非常...

    DIV+CSS常用的网页布局代码

    margin: 0px; padding: 0px; text-align: center; } #content { margin-left: auto; margin-right: auto; width: 400px; /* 这里可能存在一个笔误,应该是两个宽度设置为其中之一 */ } ``` - **知识点**: - ...

    居中,自定义布局小点整理

    2. 块元素水平居中:使用 `margin: 0 auto;` 属性可以实现块元素水平居中。 例如:`&lt;div style="width: 100px; margin: 0 auto;"&gt;块元素&lt;/div&gt;` 3. img 水平垂直居中的两种办法: a. 给父级元素加 `line-height` ...

    静态页练习

    margin: 0px;/*边距*/ text-align: center;/*文字对齐方式*/ background: #FFF;/*背景颜色*/ } a:link, a:visited { font-size: 12px;/*字体大小*/ text-decoration: none;/*文字修饰*/ } a:hover { } /*页面层...

    第十一课 css边距与边框-011

    margin: 0 auto; /* 水平居中 */ } ``` 通过理解和熟练运用CSS的边框和边距,我们可以精确控制网页元素的布局和间距,从而创造出美观且易用的界面。在遇到问题时,不要忘记寻求帮助,比如向`xingxingclassroom@...

    在IE下,当margin:0 auto;无法使得块级元素水平居中时

    在Firefox等其他现代浏览器中,`div.wrap`可以正常居中,因为它们对`margin: 0 auto;`的支持较好。但在IE中,需要父级元素有一个额外的样式`text-align: center;`来辅助实现居中。 `text-align: center;`属性通常...

    css定位表格

    margin: 0px 190px 0px 190px; } #right { position: absolute; top: 0px; right: 0px; width: 120px; } ``` 6. 多列布局(浮动定位): 浮动定位是创建多列布局的常见方法。例如,创建一个三列布局: ```html ...

    01拓展-居中方式.pdf

    今天,我们将讨论居中的几种方式,包括使用绝对定位、transform、margin auto 等方法。 一、绝对定位的盒子居中 在 HTML 结构中,我们可以使用绝对定位来实现盒子的居中。下面是一个简单的示例: HTML 结构: ```...

    HTML5&CSS3网页制作:边距属性.pptx

    margin: 5px auto; /* 上下 5 像素外边距,自动左右外边距 */ } ``` 通过熟练掌握内边距和外边距的使用,你可以更好地控制网页元素的布局和间距,从而创造出更加美观、易读的网页设计。在实践中不断尝试和探索,你...

    HTML盒子模型PPT教案.pptx

    外边距的设置可以使用 margin 属性,例如 margin: 30px auto;,表示设置上外边距为 30 像素,并且水平居中。 盒子模型的应用: 盒子模型的应用非常广泛,例如可以用来布局元素、设置边框样式、控制内容的位置等。...

Global site tag (gtag.js) - Google Analytics