当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS网页布局入门教程3：一列固定宽度居中

CSS样式表
推荐一篇利用th,colgroup,col定义表格样式
都是IE惹的祸多浏览器兼容问题
dl,dt,dd制作的CSS垂直菜单
推荐css打造经典鼠标触发显示选项
div+css中Class与ID的区别
CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
让iframe自适应高度（支持xhtml）IE firefox兼容
实用的利用 CSS + <em>标签 来完成一个三角形的制作
CSS控制文本自动换行的问题
把 CDATA 中的内容（有可能是不规范的Html代码）以Html方式展现出来。
仿客齐集首页导航条DIV+CSS+JS [代码实例]
关于margin-left的示例代码
CSS优化2-(常用CSS缩写语法总结)
font和line-height之CSS代码书写顺序不同，导致显示效果不一样
推荐三种简洁的Tab导航（网页选项卡）简析
用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！
解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
CSS2实现的隔行换色
CSS中几种常见的注释
dhtml shtml xhtml的区别解析

No. « 38 39 40 41 »

技术文章搜索

关键字

CSS样式表 中的 CSS网页布局入门教程3：一列固定宽度居中

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 129 ::
收藏到网摘: n/a

页面整体居中是网页设计中最普遍应用的形式，在传统表格布局中，我们使用表格的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以下浏览器不支持，后边的CSS HACK部分详细讲解解决办法。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

操作步骤和一列固定宽度相同，只是在CSS边框设置项将边界的上、右、下、左分别设置为0、auto、0、auto即可。