代码如下
.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;
}
分享到:
相关推荐
`margin: 0px auto` 是一个经常被用来实现水平居中的CSS属性组合,它适用于块级元素,通过设置左右外边距为自动来达到居中效果。然而,在某些情况下,尤其是在IE浏览器中,这种方法可能无法正常工作。本篇文章将深入...
复制代码代码如下: XHTML CODE: ”layout”>一列固定宽度居中</div> CSS CODE: 复制代码代码如下: #layout{ background-color:#C7E091; border:2px solid #B0BCA6;... margin:0px auto;/*外边距参数*/ }
而在水平居中时,我们只需要设置`margin-left`和`margin-right`为`auto`,通常可以通过简写`margin: 0 auto;`来实现。 但在某些情况下,当`margin-top`不为零时,可能会出现一些意外的效果。这是因为`margin-top`和...
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; ...
在提供的代码示例中,有一个内部的红色方块`div`,其宽度为50px,通过`margin: 0 auto`设置,尝试在外部的灰色背景`div`中居中。然而,如果缺少合适的文档类型声明(DOCTYPE),某些浏览器可能进入怪异模式,导致CSS...
本文将详细介绍居中方式的实现方法,包括绝对定位、flex布局、margin:auto等多种方法。 一、 绝对定位的盒子居中 在CSS中,我们可以使用绝对定位来实现盒子的居中。下面是一个简单的示例代码: ```css div { ...
在我们的示例代码中,我们将使用margin: 0px auto; 来实现居中。这里的auto值是让浏览器自动判断边距,浏览器就会将div的左右边距设为相当,并呈现为居中状态。 接下来,让我们来看一下完整的示例代码: ```html ; ...
总结来说,通过text-align属性可以简单地实现内联元素或内联块级元素的水平居中,而要实现块级元素的居中,则需要使用margin: 0 auto;方法,并确保块级元素具有宽度属性。这两种方法都是CSS布局中的基础技术,非常...
margin: 0px; padding: 0px; text-align: center; } #content { margin-left: auto; margin-right: auto; width: 400px; /* 这里可能存在一个笔误,应该是两个宽度设置为其中之一 */ } ``` - **知识点**: - ...
2. 块元素水平居中:使用 `margin: 0 auto;` 属性可以实现块元素水平居中。 例如:`<div style="width: 100px; margin: 0 auto;">块元素</div>` 3. img 水平垂直居中的两种办法: a. 给父级元素加 `line-height` ...
margin: 0px;/*边距*/ text-align: center;/*文字对齐方式*/ background: #FFF;/*背景颜色*/ } a:link, a:visited { font-size: 12px;/*字体大小*/ text-decoration: none;/*文字修饰*/ } a:hover { } /*页面层...
margin: 0 auto; /* 水平居中 */ } ``` 通过理解和熟练运用CSS的边框和边距,我们可以精确控制网页元素的布局和间距,从而创造出美观且易用的界面。在遇到问题时,不要忘记寻求帮助,比如向`xingxingclassroom@...
在Firefox等其他现代浏览器中,`div.wrap`可以正常居中,因为它们对`margin: 0 auto;`的支持较好。但在IE中,需要父级元素有一个额外的样式`text-align: center;`来辅助实现居中。 `text-align: center;`属性通常...
margin: 0px 190px 0px 190px; } #right { position: absolute; top: 0px; right: 0px; width: 120px; } ``` 6. 多列布局(浮动定位): 浮动定位是创建多列布局的常见方法。例如,创建一个三列布局: ```html ...
今天,我们将讨论居中的几种方式,包括使用绝对定位、transform、margin auto 等方法。 一、绝对定位的盒子居中 在 HTML 结构中,我们可以使用绝对定位来实现盒子的居中。下面是一个简单的示例: HTML 结构: ```...
margin: 5px auto; /* 上下 5 像素外边距,自动左右外边距 */ } ``` 通过熟练掌握内边距和外边距的使用,你可以更好地控制网页元素的布局和间距,从而创造出更加美观、易读的网页设计。在实践中不断尝试和探索,你...
外边距的设置可以使用 margin 属性,例如 margin: 30px auto;,表示设置上外边距为 30 像素,并且水平居中。 盒子模型的应用: 盒子模型的应用非常广泛,例如可以用来布局元素、设置边框样式、控制内容的位置等。...