`
itBrave
  • 浏览: 2062 次
  • 性别: 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使用margin:0px auto不居中的原因分析及解决

    复制代码代码如下: &lt;div id=”cnbruce”&gt;margin: 0 auto 看看内容居中否&lt;/div&gt; 如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“&lt;body&gt;”声明文本居中,即 复制代码代码如下: &lt;style&gt...

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

    今天遇到使用一个,div元素使用了以下样式 div.wrap{ width:1000px;...在火狐下此div水平居中,但在IE下不居中。 原因是,此div的父级元素没有使用以下样式 div.wrap_parent{text-align:center;} 特此记录

    ie css margin auto 不居中解决方案

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

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

    比如: &lt;div&gt; &lt;div&gt; &lt;/div&gt; &lt;/div&gt; 想让子div在父div中水平居中对齐,如果在css中写 div { text-align: center; }的话在ie中浏览没有问题,但在firefox中依然左对齐。 所以必须再加一个样式 div div { margin-left:...

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

    正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。 如下代码: 复制代码代码如下:&lt;style type=”text/css”&gt;#con{...

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

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

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

    div style=margin:0 auto这个属怎么弄都不能让页面居中展示,原因是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档

    一个div在浏览器水平居中的实现方法

    一个div在浏览器水平居中的实现方法 第一种方法: CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; }  第二种方法(兼容IE): CSS Code复制内容到剪贴板 body { text-align: ...

    CSS中让DIV居中的代码

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

    CSS中怎么让DIV居中亲自实验得出的结论

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

    如何使div垂直水平居中的css代码

    解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的

    关于CSS控制DIV水平居中问题

    margin:0 auto;  于是可以使用这种方式,但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。 &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器

    1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 ...

    css三种方法实现div在浏览器水平居中

    本文教大家如何实现一个div在浏览器水平居中,下面是三种解决方法,具体内容如下 第一种方法: CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; }  第二种方法(兼容IE): CSS Code复制...

    Div+CSS布局居中

    弄了个网页,在IE下都没啥问题,换成火狐才发现布局乱了,最主要的就是菜单flash不居中,在网上找了好久, 都说margin-left:auto margin-right:auto几乎所有的帖子都一样.自己照搬就是不行。。。

    IE9下DIV本来应该居中的结果显示为居左

    在IE9下面本来应该居中的,结果显示为居左,在IE9以上的版本中,只需要设置 margin:0px auto; 就可以使得DIV居中,下面的示例,大家可以参考下

    让div+css兼容所有浏览器的一些注意事项

    1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: ...

    FireFox浏览器和IE浏览器下CSS兼容问题

    2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会...

    IE与Firefox的CSS兼容大全 推荐

    常见兼容问题: 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) ...

Global site tag (gtag.js) - Google Analytics