利用DIV+CSS布局时,经常需要利用DIV居中,很多时候如果不知道怎样设置CSS,需要写大量的代码和复杂的Javascript来让DIV居中,其实利用CSS,可以轻松的设置DIV居中,而且对IE和Firefox都适用。
其实非常简单,只需要两行代码就可以了:
width:900px;
margin:0px auto;
我们要给一个DIV设置它的宽度,然后设置margin的左边和右边的边缘都是自动auto.
margin:0px auto
具体代码有:
DIV:
<div id="mainBody">
CSS:
#mainBody{
width:900px;
margin:0px auto;
margin-top:20px;
font-size:14px;
}
具体的代码可以参考附件。
另外在利用DIV+CSS布局时,最好写上Doctype:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 否则不用的浏览器,不同的浏览器版本,可能会产生不同的页面显示效果。
文章地址:
http://javapub.iteye.com/blog/709361
分享到:
相关推荐
DIV+CSS 图片垂直居中效果
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
DIV+CSS布局,DIV嵌套使用,Div上下,左右布局,居中显示。
DIV+CSS上下左右绝对居中
10 三、实现结构与表现分离 11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE...
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学div+css的朋友有启发。
实现div+css的整体布局的实例,可以更好地理解这种布局,其中关于float用的比较多,还有div居中处理
css图片垂直居中,分IE,与非IE进行,很详细的
div+css文本水平垂直居中,兼容ie、谷歌等浏览器
20个div+Css布局技巧 如居中,透明,
NULL 博文链接:https://zhouyao.iteye.com/blog/417432
弄了个网页,在IE下都没啥问题,换成火狐才发现布局乱了,最主要的就是菜单flash不居中,在网上找了好久, 都说margin-left:auto margin-right:auto几乎所有的帖子都一样.自己照搬就是不行。。。
div+css布局限制图片最大宽度图片水平垂直居中兼容IE6
...
...
js+CSS实现弹出居中背景半透明div层的方法.docx
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...