`
itBrave
  • 浏览: 2262 次
  • 性别: Icon_minigender_1
  • 来自: 天津
最近访客 更多访客>>
社区版块
存档分类
最新评论

margin 0 auto DIV在IE中无法居中解决

阅读更多
一、DIV水平布局居中介绍   -   TOP

让最外层DIV在IE浏览器中水平居中,除了对其设置margin:0 auto外,一般还要对body设置样式,但一般高版本IE浏览器无须设置此CSS样式也能使DIV居中,低版本IE比如IE6和对标准比较严格浏览器需要设置text-align:center。
有时不经意对要居中的最外层设置float:left或float:right也是造成设置margin:0 auto布局不能水平居中原因。
因为设置float是让DIV浮动靠左或浮动靠右,你要让DIV居中肯定需要设置margin:0 auto,这个时候就是逻辑错误了,即让DIV靠左或靠右,又居中,这个明显逻辑错误。所以要让最外层DIV水平居中于浏览器中,就100%不能同时使用float,必须要使用margin:0 auto样式。
相关知识:margin:0 auto作用。

二、DIVCSS5总结下最外层DIV盒子水平布局居中条件   -   TOP

1、不能使用float(无论float:left和float:right都不能使用)
2、对body设置text-align:center,以便兼容低版本和高版本浏览器
3、对最外层DIV设置margin:0 auto,兼容各大浏览器水平居中样式。

三、DIVCSS5小实例说明   -   TOP

假如最外层DIV的CSS class命名为“main”,为了看到居中效果,对此盒子设置css宽300px、css高100px、红色边框,让其居中。
此实例是在DIVCSS5初始化模板基础上完成,以便更好兼容各大浏览器,建议无论实践还是做项目,大家都可以使用DIVCSS5提供初始化模板基础上开发制作,减少错误与增强CSS兼容性。
1、完整实例DIV+CSS代码
1)、关键CSS代码
body{ text-align:center}
.main{ margin:0 auto; width:300px; height:100px; border:1px solid #F00}
2)、关键HTML代码
<div class="main">
容易填写DIVCSS实例内容
</div>

3)、CSS布局居中重点说明
关键对body设置text-align:center,同时对要居中DIV设置 margin:0 auto即可实现DIV水平居中,当然不能同时再设置float浮动样式。如果出现使用margin:0 auto,也对body设置text-align:center仍然不居中,这个时候考虑是否设置css float样式。

注:文章出处和来源网址:http://www.divcss5.com/jiqiao/j772.shtml
在此只做学习使用...
分享到:
评论

相关推荐

    div错位解决IE6IE7IE8样式不兼容问题

    - **调整`margin`值**:为了修复IE6中div错位的问题,可以尝试调整div的`margin`值,例如:`style="margin-left:-5px;"`,这样可以稍微向左移动元素以修正错位现象。 - **使用条件注释**:条件注释是一种只被IE识别...

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

    本文将深入探讨在Internet Explorer(IE)浏览器中,为何`margin: 0 auto;`在某些情况下无法使块级元素水平居中,并提供解决方案。 首先,`margin: 0 auto;`这个CSS声明通常用于使具有固定宽度的块级元素在容器内...

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

    解决这个问题的一种方法是在`&lt;body&gt;` 标签内设置`text-align: center`,这会使整个页面内容居中,然后通过设置子元素的`margin: 0 auto` 来使其在父元素中居中。 另一种解决方案是添加文档类型声明(DOCTYPE),如`...

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

    css+div 在IE中兼容

    在Firefox中,当`body`元素的`text-align`属性设置为某一值时,可能需要设置`div`元素的`margin: auto`才能实现正确的居中对齐,而在IE中可能不需要。 ### 14. CSS 链接状态顺序 遵循`Link - Visited - Hover - ...

    html中使用margin:0 auto整个页面不居中的解决方法

    这里我们讨论的是在HTML中使用`margin: 0 auto`来实现元素水平居中,但遇到页面不居中的问题及其解决方案。这个问题通常涉及到浏览器的解析差异,尤其是Internet Explorer(IE)与更现代的浏览器之间的差异。 首先...

    ie css margin auto 不居中解决方案

    } 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下: &lt;div id=cnbruce&gt;margin: 0 auto 看看内容居中否&lt;/div&gt; 如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“&lt;body&gt;”声明...

    CSS网页布局DIV水平居中的各种方法

    通过设置元素的左右外边距(`margin-right`和`margin-left`)为`auto`,可以使其在容器中水平居中。例如: ```css #wrap { width: 760px; margin: 0 auto; /* 其他样式 */ } ``` 这个例子中,`#wrap`会根据其...

    ie下margin不居中的三种解决方法

    在编写网页时,为了使内容在浏览器中居中显示,开发者通常会使用CSS样式`margin: 0 auto;`来达到预期效果。这个样式能够使块级元素在其包含块中水平居中。然而,当在旧版本的Internet Explorer浏览器(IE6、IE7、IE8...

    css控制div中元素居中的示例.pdf

    使用 margin: 0 auto 属性可以使 DIV 元素水平居中。 三、position: absolute 使用 position: absolute 属性可以使 DIV 元素绝对定位,从而实现水平居中。 四、flexbox 使用 flexbox 属性可以使 DIV 元素水平...

    div中子div在firefox ie 水平居中对齐

    在本例中,我们讨论的是如何使一个内嵌的`&lt;div&gt;`元素在它的父`&lt;div&gt;`中水平居中对齐,同时兼容Firefox和Internet Explorer(IE)浏览器。这个问题涉及到CSS的布局特性,主要包括`text-align`属性和自动外边距(`...

    div错位解决IE6、IE7、IE8样式不兼容问题IE6里DIV错位的问题.doc

    本文档主要关注在IE6、IE7、IE8中遇到的一个典型问题——**DIV错位**,并提供了解决方案。 #### 二、DIV错位现象分析 在文档中提到,采用`float: left;`样式的DIV在IE8和IE7中表现正常,但是在IE6中会出现向下偏移...

    chrome居中但ie不居中的解决方法

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有...经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”,这揭示了在Web开发中,尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时,开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为,...

Global site tag (gtag.js) - Google Analytics