主页 > 知识库 > CSS网页布局入门教程3:一列固定宽度居中

CSS网页布局入门教程3:一列固定宽度居中

热门标签:美图手机 铁路电话系统 智能手机 服务器配置 检查注册表项 银行业务 网站文章发布 呼叫中心市场需求
页面整体居中是网页设计中最普遍应用的形式,在传统表格布局中,我们使用表格的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 全选 注:引入外部Js需再刷新一下页面才能执行]

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

您可能感兴趣的文章:
  • CSS网页布局入门教程1:一列固定宽度
  • CSS网页布局入门教程4:二列固定宽度
  • CSS网页布局入门教程6:左列固定,右列宽度自适应
  • 表格头固定而列可滚动的效果
  • 基于jquery的固定表头和列头的代码
  • android开发之横向滚动/竖向滚动的ListView(固定列头)
  • asp.net gridview列宽固定的几种方法介绍
  • HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

标签:上海 沧州 河南 沈阳 长治 红河 新疆 乐山

巨人网络通讯声明:本文标题《CSS网页布局入门教程3:一列固定宽度居中》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266