<!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. 【实践练习一】Git以及Github的使用

           以前经常在同学大神那听说过Github这神器,虽敬佩久已,奈何却无缘使用.好吧,我承认,主要还是不会用,一看网站全是英文的,想想还是不要为难自己了.然而现在还是要为难自己了,趁着早上刚学 ...

  2. canvas-2lineCap.html

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

  3. python爬虫入门---第四篇：网站对爬虫的限制及突破测试

    大部分网站对网络爬虫都有限制,限制方式有两种: 一.Robots协议:二.网站通过判断对网站访问http的头部信息来查看是否是爬虫,并对爬虫做相关拦截 第一种限制是书面限制,第二种是强制性阻拦限制.那 ...

  4. csharp: Configuring ASP.NET with Spring.NET and FluentNHibernate

    Domain: FluentNhibernateLocalSessionFactoryObject.cs using System; using System.Collections.Generic; ...

  5. 一款超级炫酷的编辑代码的插件 Power Mode

    今天偶尔发现了一款比较炫酷的插件,想让你们看看效果 打代码的时候会有非常炫酷的效果哟 因为我用的编辑器是VScode,所以我也只搞了搞VSCode中使用Power Mode的方法,如果你用的是别的编辑 ...

  6. python之while循环/格式化输出/运算符/初始编码/成员变量

    一.主要内容:1.while 循环 (难点)while 条件: 循环体 break: 直接跳出循环continue:停止当前本次循环,继续执行下一次循环.不会中断循环能让循环退出:(1)break ( ...

  7. 移动端reset

    * { margin: 0; padding: 0;}article, aside, details, figcaption, figure, footer, header, hgroup, main ...

  8. mooc《数据结构》 习题1.8 二分查找

    本题要求实现二分查找算法. 函数接口定义: Position BinarySearch( List L, ElementType X ); 其中List结构定义如下: typedef int Posi ...

  9. Java并发编程（九）并发容器

    并发容器的简单介绍: ConcurrentHashMap代替同步的Map(Collections.synchronized(new HashMap())),众所周知,HashMap是根据散列值分段存储 ...

  10. React.js 新手教程

    正如你能从标题猜到的,这篇文章的目标是给那些有很少编程经验的读者的.比如,像我这样的人:因为迄今为止,我才探索了编程世界6个月.所以,这将是一篇新手村教程! 你只需要拥有对 HTML 和 CSS 的理 ...