有一个div居中的样式属性,在firefox中显示正常,在IE下就不能居中
找了一下,有的说是要加一个w3c认证的一个声明
加一个3C 调用声明
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我不想加
还有一个说法,说要给body加一个属性
text-align:center;
我更不想加,代价有点大
既然给body加这个属性能行,那干嘛不在外面包上一个带这个属性的div呢
测试之,通过
- <div style="text-align:center;">
-
<div style="margin:0 auto;">居中</div>
-
</div>
.nav {
position: relative;
/*
margin: 0px 0px 0px 0px; /*主菜单的距离 为:上,右,下,左*/
width:961px;
margin: 0 auto 0px auto;
background: url(images/bImg/nav_bg.png) no-repeat 0 -36px;
}
======================
使用margin的auto值有什么好说的呢。一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定。这些值中,只有width和margin-left,margin-right可以设为auto。在这里和大家讨论一下三者之间的关系 。下面 介绍一下几条原则:
1. auto 可以解释为:弥补其它部分与所要求总合之间的差别;
2.如果三个属性都没有被设置成auto ,那么margin-right会被强制设为auto;
3.如果两个边界都被设为 auto ,则被设为相等的值。
4. 如果两个边界之一和width设为auto ,则被设置为auto的边界值为0;
5.三个都被设为auto ,则2个边界的值都为0,width的值为最大可能值。
写得有点乱,记得以前看过一些资料有这方面的详细描述,只是现在想不起也找不到了。不过大概也就这几个点了,了解一下就可以。
转自:http://hotsunshine.iteye.com/blog/1069573
http://www.cnblogs.com/freeskycd/archive/2010/03/03/1677820.html
注意:没有上或者下方向的auto
此应用一定程度上可以代替float,而且更方便,兼容更好
分享到:
相关推荐
首先,`margin: 0 auto`是CSS中的一种居中对齐方法,它将元素的上下边距设置为0,左右边距自动分配,以使元素在容器内水平居中。但这种方法有时在某些浏览器中可能不起作用,特别是当HTML文档类型定义(DOCTYPE)...
这是因为`margin-top`和`margin-bottom`的值默认为`auto`时,浏览器可能会将其视作零,而不会像`margin-left`和`margin-right`那样自动调整。这可能导致元素并没有像预期的那样垂直居中。 ```css div { margin: 10...
对于“一边固定,一边自动扩展”的布局问题,这也与浏览器的解析模式有关。在Quirks模式或旧版IE中,未正确声明`DOCTYPE`可能导致元素的宽度计算方式不一致,进而影响到浮动元素的布局。添加正确的`DOCTYPE`声明可以...
这就是为什么在第二个示例中,添加了XHTML 1.0 Transitional的DOCTYPE声明,使得浏览器以标准模式解析页面,从而使`margin: 0 auto`正常工作。 值得注意的是,虽然`margin: 0 auto`对于块级元素的水平居中非常有效...
- “Rank Margin Tool”选项位于“Intel RCSetup”->“Memory Configuration”->“Rank Margin Tool”(默认值为Auto)。 - 如图6所示,将“Serial Debug Message”设置为“Maximum”。 - 串行调试选项位于...
本文将深入解析margin属性的特性和应用场景。 首先,我们要明确margin的基本概念。在CSS中,margin属性用于设置元素的上下左右四个方向的外边距。它可以单独设置每个方向的值,如`margin-top`、`margin-right`、`...
`margin: 0px auto` 是一个经常被用来实现水平居中的CSS属性组合,它适用于块级元素,通过设置左右外边距为自动来达到居中效果。然而,在某些情况下,尤其是在IE浏览器中,这种方法可能无法正常工作。本篇文章将深入...
2. **自动外边距(`auto`)**:`margin: auto`可以使元素在容器中居中,通常用于水平居中。在流体布局中,`margin: auto`配合`width`设置可以实现元素在父容器内的自适应居中。 3. **百分比值**:外边距可以设置为...
在这个例子中,如果`p`元素的`width`改为`auto`,那么它的宽度(包括`width`、`margin`、`padding`和`border`)将等于父级元素的宽度,减去`padding`的左右总和。所以,如果`padding`是`10px`,那么`width`的实际值...
对于使用MyEclipse等开发工具自动生成的文件,它们默认的DOCTYPE可能不包含上述DTD,从而造成在IE中无法用`margin: auto`实现居中。 因此,为了解决这个问题,开发者需要确保在每个页面的开头都正确地声明DOCTYPE,...
- auto:浏览器自动计算外边距的大小; - length:使用具体的长度值,如像素(px)、厘米(cm)等; - percentage:相对于包含块(父元素)宽度的百分比。 当要设置所有四个方向的外边距时,可以使用简写属性margin,...
- **简写形式**: margin值可以简写为一个值(四个边共用)、两个值(上下边共用和左右边共用)、三个值(上、左右、下边共用)或者四个值(按顺序分别设置上、右、下、左边)。 #### 2. 居中div的方法 - **使用...
在网页设计与开发过程中,经常遇到的一个问题是不同浏览器对CSS样式的解析差异导致的兼容性问题。本篇文章主要针对Dreamweaver(简称DW)设计工具中设置`height: auto`在Firefox浏览器下显示异常的情况进行分析,并...
具体做法是通过设置`div`的`margin`属性为`auto`来自动调整左右间距,使其居中显示。下面是一段示例代码: ```css #wrap { margin: 0 auto; } ``` **解析:** - `margin: 0 auto;`:这行代码表示`#wrap`元素的上...
margin-left: auto; margin-right: auto; width: 400px; /* 这里可能存在一个笔误,应该是两个宽度设置为其中之一 */ } ``` - **知识点**: - `margin: 0px;`:去除默认的边距。 - `text-align: center;`:使...
3. 如果使用本地库,可能需要先将图像保存,然后通过系统命令行调用Zxing的解码工具,解析出二维码信息。 4. 处理识别结果:获取到二维码信息后,根据需求进行下一步操作。 由于AutoJS自身不包含完整的二维码识别...
对于`ul`列表,Firefox默认有padding值,而IE只有margin值。统一设置`ul{margin:0;padding:0;}`可以消除差异。浮动元素的处理也需要注意,未闭合的浮动div在FF中会导致问题,需要添加`.clear{clear:both;}`进行清理...
`margin` 属性用于设置外边距,`0 auto` 表示上下外边距为0,左右外边距自动分配,从而实现了水平居中。 - `text-align: center;` 这一行代码主要用于兼容老版本的IE浏览器(IE6及以下版本)。这些浏览器无法正确...
外边距可以设置为自动(auto),使浏览器自动分配空间,或者设定具体的像素值。 在CSS中,元素的总宽度和总高度是由内容区域的宽高、内边距、边框和外边距共同决定的。这种计算方式在不同浏览器间可能有所差异,有...