当前位置:首页 > DIV+CSS教程 > 正文

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章。明天继续
管理员回复:你现在看到的已经是改版过的网站了

出差旅游免费预订酒店

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