当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-09-06

    本文导语:  页面整体居中是网页设计中最普遍应用的形式,在传统表格布局中,我们使用表格的align="center"属性来实现,。div本身也支持align="center"属性,也可以让div呈现居中状态,但css布局是为了实现表现和内容的分离,而align对齐属性...

页面整体居中是网页设计中最普遍应用的形式,在传统表格布局中,我们使用表格的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部分详细讲解解决办法。
一列固定宽度居中——WWW.AA25.CN
一列固定宽度居中(AA25.CN)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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


    
 
 

您可能感兴趣的文章:

  • 非常漂亮的Div+CSS布局入门教程第1/5页
  • CSS网页布局入门教程1:一列固定宽度
  • CSS网页布局入门教程2:一列自适应宽度
  • CSS网页布局入门教程6:左列固定,右列宽度自适应
  • CSS网页布局入门教程7:二列固定宽度居中
  • CSS网页布局入门教程5:二列宽度自适应
  • CSS入门教程篇
  • CSS网页布局入门教程4:二列固定宽度
  • CSS网页布局入门教程14:纵向下拉及多级弹出式菜单
  • CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
  • CSS网页布局入门教程12:纵向导航菜单
  • CSS网页布局入门教程8:三列浮动中间列宽度自适应
  • CSS网页布局入门教程10:带当前标识的标签式横向导航
  • CSS网页布局入门教程9:用CSS设计网站导航——横向导航
  • CSS网页布局入门教程13:下拉及多级弹出式菜单
  • 用css实现图片垂直居中的使用技巧
  • 在IE与FF中如何居中的css写法
  • css布局网页水平居中常用方法
  • css支持标准的图片垂直居中
  • 纯CSS实现上下左右都居中的代码
  • CSS解决未知高度垂直居中的问题
  • CSS如何使DIV层居中
  • css实现文字垂直居中的代码第1/2页
  • CSS解决未知高度垂直居中
  • 一个自动居中的导航条实例与相关问题 DIV+CSS
  • CSS List Grid Layout 图片垂直居中
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • CSS控制图片大小-适应宽度
  • 左侧固定宽度,右侧自适应宽度的CSS布局
  • div+css实现自适应宽度按钮
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • CSS网页布局入门教程4:二列固定宽度 iis7站长之家
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3