<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin-auto</title>

    <style>

        .main {

            width: 600px;

            margin: 0 auto;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="main">

        1.设置块级元素的 width 可以防止它从左到右撑满整个容器。<br/>

        2.然后你就可以设置左右外边距为 auto 来使其水平居中。<br/>

        元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。<br/>

        3.唯一的问题是，当浏览器窗口比元素的宽度还要窄时，<br/>

        浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...<br/>

    </div>

</body>

</html>

结果：

原文地址：http://zh.learnlayout.com/margin-auto.html

学习CSS布局 - margin: auto;的更多相关文章

  1. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  2. “学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  3. WEB学习-CSS中Margin塌陷

    margin的塌陷现象 标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; marg ...

  4. 学习CSS布局 - position

    position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...

  5. 学习CSS布局 - box-sizing

    box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素 ...

  6. 学习CSS布局 - 盒模型

    盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...

  7. (九)学习CSS之margin属性

    参考: 所有浏览器都支持 margin 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 margi ...

  8. 学习CSS布局 - position例子

    position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...

  9. 学习CSS布局 - max-width

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 小程序和PHP学习笔记 ----- 不定期更新。

    学习tp5和小程序过程需要记住的重点记录 1,box-sizing: border-box; 规定两个并排的带边框的框 border-box 为元素设定的宽度和高度决定了元素的边框盒. 就是说,为元素 ...

  2. 【读书笔记】iOS-iOS安全基础知识

    一,iOS硬件/设备的类型. iPad的问世,就是在这一方向上迈出的第一步.第一代iPad使用了ARM Cortex-A8架构的CUP,它的速度大约是第一代iPhone所使用CPU速度的两倍. iPa ...

  3. 【读书笔记】iOS-软件测试与iOS测试

    一,软件测试的类型. 1.软件测试按照测试类型,可以划分为:单元测试,集成测试和系统测试. 2.单元测试是指对软件系统中最小可测试单元进行的检查和验证. 3.集成测试,在iOS软件开发中,集成测试主要 ...

  4. spring配置log4j

    1.引入log4j-xxx.jar包,buildpath. 2.在项目的根目录下新建resources名的文件夹,注意是source folder,并新建log4j.properties文件 3.在l ...

  5. css 实用代码汇总

    1.table 排版(防止td文字过多导致table变形) table { /*为表格设置合并边框模型*/ border-collapse: collapse; border-spacing: 0; ...

  6. Linux Linux内核参数调优

    Linux内核参数调优 by:授客 QQ:1033553122 关于调优的建议: 1.出错时,可以查看操作系统日志,可能会找到一些有用的信息 2.尽量不要“批量”修改内核参数,笔者就曾这么干过,结果“ ...

  7. loadrunner 脚本开发-调用java jar文件远程操作Oracle数据库测试

    调用java jar文件远程操作Oracle数据库测试 by:授客 QQ:1033553122 测试环境 数据库:linux 下Oracle_11g_R2 Loadrunner:11 备注:想学ora ...

  8. Android JNI c/c++调用java 无需新建虚拟机

    近期通过研究SDL源码 得出android JNI  c/c++调用java 无需新建虚拟机: 具体步骤如下 第一步获得:两个参数 JNIEnv和jclass void Java_com_Test_A ...

  9. Android联网更新应用

    UpdateInfo public class UpdateInfo { public String version;//服务器的最新版本值 public String apkUrl;//最新版本的路 ...

  10. Android之移动热修复

    阿里云推出了移动热修复服务,听说这个服务傻瓜式接入,性能相对较好,对新技术比较好奇的我决定尝试一下. 1.首先,需要开通这个服务,创建应用 2.然后,在项目中接入服务.按照文档所述 第一步:gradl ...