margin 0 auto DIV在IE中无法居中

2019-09-07 郑州网站建设  

一、DIV水平组织居中先容

让最外层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浸染

二、CSS5总结下最外层DIV盒子水准机关居中前提

1、不能运用float(不管float:left与float:right都不克不及运用)
2、对body配置text-align:center,以便兼容低版本和高版本阅读器
3、对最外层DIV配置margin:0 auto,兼容各大涉猎器程度居中样式

三、CSS5小实例说明

要是最外层DIV的CSS class定名为“main”,为了看到居中功效,对此盒子配置css宽300px、css高100px、赤色边框,让其居中。

此实例是在CSS5初始化源码根柢上完成,以便更好兼容各大阅读器,倡始不管现实照旧做项目,各人都可使用CSS5供应初始化源码根抵上拓荒制作,减少差错与增强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>

2、成就截图

DIV CSS水平居中实例效果

DIV CSS水准居中实例成效截图


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1024.html转载请标明出处,谢谢合作!
标签:
  • DIV
  • margin
  • auto
  • 居中
  • 无法