`
kabike
  • 浏览: 609460 次
  • 性别: 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 像素，并且水平居中。 盒子模型的应用： 盒子模型的应用非常广泛，例如可以用来布局元素、设置边框样式、控制内容的位置等。...

Magicbox
Global site tag (gtag.js) - Google Analytics