一、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 id=”cnbruce”>margin: 0 auto 看看内容居中否</div> 如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body>”声明文本居中,即 复制代码代码如下: <style>...
今天遇到使用一个,div元素使用了以下样式 div.wrap{ width:1000px;...在火狐下此div水平居中,但在IE下不居中。 原因是,此div的父级元素没有使用以下样式 div.wrap_parent{text-align:center;} 特此记录
} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下: <div id=cnbruce>margin: 0 auto 看看内容居中否</div> 如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body>”声明...
比如: <div> <div> </div> </div> 想让子div在父div中水平居中对齐,如果在css中写 div { text-align: center; }的话在ie中浏览没有问题,但在firefox中依然左对齐。 所以必须再加一个样式 div div { margin-left:...
正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。 如下代码: 复制代码代码如下:<style type=”text/css”>#con{...
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有...经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟
div style=margin:0 auto这个属怎么弄都不能让页面居中展示,原因是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档
一个div在浏览器水平居中的实现方法 第一种方法: CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; } 第二种方法(兼容IE): CSS Code复制内容到剪贴板 body { text-align: ...
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身...经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身...经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模
解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的
margin:0 auto; 于是可以使用这种方式,但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
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: 设置 ...
本文教大家如何实现一个div在浏览器水平居中,下面是三种解决方法,具体内容如下 第一种方法: CSS Code复制内容到剪贴板 div { margin: 0 auto; width: 960px; } 第二种方法(兼容IE): CSS Code复制...
弄了个网页,在IE下都没啥问题,换成火狐才发现布局乱了,最主要的就是菜单flash不居中,在网上找了好久, 都说margin-left:auto margin-right:auto几乎所有的帖子都一样.自己照搬就是不行。。。
在IE9下面本来应该居中的,结果显示为居左,在IE9以上的版本中,只需要设置 margin:0px auto; 就可以使得DIV居中,下面的示例,大家可以参考下
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: ...
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 会...
常见兼容问题: 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) ...