当前位置:首页 > DIV+CSS实例 > 正文

DIV+CSS网页布局技巧实例1:设置网页整体居中的代码

作者:不详 来源:source 【 】 浏览: 添加日期:2007-10-14 我要评论(17)     

以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已。

<style>
#layout { width:778px; margin:0 auto; text-align:center;}
</style>
<div id="layout">标准之路www.aa25.cn</div>

请看这段代码,宽度为适合800×600分辨率浏览器的宽度,margin:0 auto; 这句代码就是让居中了,意思是外边距上下设置为0,左右设为自动。这样它就居中了。

那么可能你要问了,text-align:center;为什么还要让内容居中呢?呵呵,别着急,这句是为了适应IE6以下版本的浏览器而加的,IE6以下对margin:0 auto;不能解析为居中,所以用这种方式来补救,以下在设计内容时再用 text-align:left;就可以了。

注:margin和padding的值的顺序为顺时针上右下左,如margin:1px 2px 3px 4px;还可以缩写为上下、左右,如本例,如果为margin:0px;则是各边都为0


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

〖栏目所有文章〗Tags: 标签地图

所属专题:DIV布局技巧

更多评论(17)..网友评价

haoke(58.39.*.*) 发表于:2013-07-23 22:49:34
看了一小部分你的网站,真心的感觉不错哦~~准备把你网站看一遍,应为div+css布局,一直是头痛的问题,要非常细心,但是平常搞开发又不得不遇到,希望按照你的教程看完后有个质的飞跃,顶~!!!
flydany(114.98.*.*) 发表于:2014-11-09 10:48:08
解释的挺详细
gfddd(122.159.*.*) 发表于:2014-10-29 15:28:01
写的非常好,感谢咱网站做的这么好的教程,我原来做的3e娱乐网www.3ew.net里就出现了很多CSS不兼容的问题,现在看了这教程改了好多老问题!祝咱网站越办越好!
管理员回复:欢迎常来
chenxu(123.122.*.*) 发表于:2014-08-11 10:32:47
#layout{ width:972px; margin:0px auto; padding:0px; } 请问:为什么不能居中呢?
管理员回复:应该能居中呀,什么浏览器?
vilain(113.111.*.*) 发表于:0000-00-00 00:00:00
我自己有一个方法··IE6中没什么问题 管理员看下 <div align="center"></div> 管理员看下这个怎么样
管理员回复:align这种写法属于淘汰方法
宝宝(220.173.*.*) 发表于:2013-10-22 09:02:59
不知道为什么我用Dreamweaver制作出两个不一样的页面,却在火狐浏览器和谷歌浏览器下总是有一个网页不居中,,是为什么哦,请教高手{前提是我两个网页都设置居中了,只是有一个用布局表格,一个是表格排列,是怎么回事?)
管理员回复:这个得看源代码
不居中(59.53.*.*) 发表于:2013-09-16 14:22:22
我用记事本编写不能居中 原来是要在代码前加 才能居中 ,站长解释下为什么把 谢谢了啊
管理员回复:不是呀,直接写成行内样式也可以居中的,估计是你代码写错了
水果篮子(132.232.*.*) 发表于:2013-09-01 11:19:24
大大,运行代码在火狐里面没用,老要切出去,能不能改进一下。
管理员回复:好,这个会改进的

【视频教程】新手常见问题

Copyright ®2013-2018 www.51itstudy.com online services. All rights reserved.

意见反馈 E-mail: kefu@51itstudy.com

声明:本网站尊重并保护知识产权,根据《信息网络 传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在24小时内通本站,我们会及时删除!

    

粤ICP备14015648号-3