CSS网页布局入门教程3:一列固定宽度居中
作者:不详 来源:AA25原创 【大 中 小】 浏览: 修改日期:2009-02-17 我要评论(37)
本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!
页面整体居中是网页设计中最普遍应用的形式,在传统表格布局中,我们使用表格的align="center"属性来实现。div本身也支持align="center"属性,也可以让div呈现居中状态,但css布局是为了实现表现和内容的分离,而align对齐属性是一种样式代码,书写在XHTML的div属性之中,有违背分享原则(分离可以使你的网站更加利于管理),因此应当用css实现内容的居中,我们以固定宽度一列布局代码为例,为其增加居中的css样式:
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 300px;
margin:0px auto;
}
margin属性用于控制对象的上、右、下、左四个方向的外边距,当margin使用两个参数时,第一个参数表示上下边距,第二个参数表示左右边距。除了直接使用数值之外,margin还支持一个值叫auto,auto值是让浏览器自动判断边距,在这里,我们给当前div的左右边距设置为auto,浏览器就会将div的左右边距设为相当,并呈现为居中状态,从而实现了局中效果。
注:此方法居中对于IE6以下浏览器不支持。
标准之路www.aa25.cn 提示:可以先修改部分代码后再运行
操作步骤和一列固定宽度相同,只是在CSS边框设置项将边界的上、右、下、左分别设置为0、auto、0、auto即可。

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)
〖DIV+CSS教程〗Tags: CSS 入门 教程 居中
所属专题:入门教程
相关文章
更多评论(37)..会员评论
- star6225(123.184.*.*) 发表于:2011-04-19 16:41:09
- 我很想知道,那要是IE6以下的怎么办
- 管理员回复:什么情况
- ijse(119.166.*.*) 发表于:2010-07-10 23:36:36
- 额。。在IE6下要居中的话,要把body设为 text-align:center; 在DIV中设为:text-align:left;
- 管理员回复:IE6以下浏览器
- hanmei(125.41.*.*) 发表于:2010-06-19 15:10:52
- 管理员你好,我把你的代码复制到我的电脑都正确,但是我把你的css定义我的里面在引用到我的网页怎么就是不剧中,始终在左面。是怎么回事,我用ie8.是不是浏览器的问题。
- 管理员回复:有可能是代码冲突吧
- songaixiang(119.162.*.*) 发表于:2010-05-17 16:26:28
- margin是指距浏览器还是哪个的距离吗?
- 管理员回复:看是在什么元素上设置了,建议看下css手册中的解释
- songaixiang(119.162.*.*) 发表于:2010-05-17 16:24:57
- margion 是指到那个边的距离呢?
- 管理员回复:margin可以定义四个边的外边距
- feelboat(219.137.*.*) 发表于:2010-05-15 01:08:46
- 很有用哦。。雖然是初學者。。不過步驟很清晰。。相信可以學好的。。
- 管理员回复:欢迎常来
- zyj(119.139.*.*) 发表于:2010-04-17 14:37:52
- 你好,觉得学这个好难,有没有更简单的方法啊?好多英文都不认识耶,也不知道怎么去写代码,完全不懂!
- 管理员回复:啊,如果觉得这个都好难的话建议改行吧。建议还是先学习html和css基础知道,然后再学习这些教程
- 财富之门.中国(58.83.*.*) 发表于:2010-02-03 21:50:53
- 管理员回复:好的,谢谢你,本站马上改版,改版后就会加上 文章出处:标准之路(http://www.aa25.cn/div_css/263.shtml) 网站改版CSS布局入门教程地址可别换呀,别让我找不到,今天就学3章。明天继续
- 管理员回复:你现在看到的已经是改版过的网站了
推荐文章
热门文章
最新评论文章
推荐专题
在线交流QQ群
- 106310407(开)
- 55427134(开)
- 2993401(开)
- 30235673(开)
- 33424604(开)
- 2993401(开)
- 161512108(开)
- 161510519(开)
- 158375021(开)
- 155858414(开)
- 143309878(开)
- 16373807(开)
- 129098721(开)
- 123473199(开)
- 146991009(开)
- 135792800(开)
