• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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网页布局入门教程2:一列自适应宽度
    下一篇:CSS网页布局入门教程4:二列固定宽度
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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