<!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. canvas-4createPattern.html

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

  2. python中传值和传地址问题

    在python中,还没有对这个知识点有一个详细的定义,很模糊的说明了,通过下面代码,可以观察出来,什么时候传的是值,什么时候传的是地址 有时候会发现自己的数据发生变化,可能就是这个原因,python的 ...

  3. 前端面试整理——javascript算法和测试题

    (1)算法: 1.斐波那契数列:1.1.2.3.5.8.13.21.输入n,输出数列中第n位数的值. 方案一: function fn(n){ var num1 = 1, num2= 1, num3 ...

  4. WEB服务器----Apache 安装配置

    1.官网下载需要的安装包(包括主安装包和依赖包的下载)可以直接使用Linux的wget进行下载: httpd安装包下载地址:http://mirrors.hust.edu.cn/apache//htt ...

  5. 工作中常用到的Vim命令

    最近工作中需要到linux服务器上更改文件,苦于对vim的各种命令不熟悉,今天特此总结并熟悉一下各种vim命令,好提高工作效率.后期持续更新 vim编辑器个人设置 先复制一份vim配置模板到个人目录下 ...

  6. 记录C/C++中遇到的一些小问题

    1. printf 比如 char a = \x90; printf("%02x", a); 想输出为90,没想到却是ffffff90,这个问题害我一个程序老是出错 最终发现只要改 ...

  7. [20171206]rman与truncate2.txt

    [20171206]rman与truncate2.txt --//上午测试发现truncate的表在做rman备份时还要做8个extents的备份.--//不知道自己的猜测是否正确,选择一个使用UNI ...

  8. 洗礼灵魂，修炼python（47）--巩固篇—定义类的方法之@classmethod，@staticmethod

    定义类的方法,相信你会说,不就是在class语句下使用def () 就是定义类的方法了嘛,是的,这是定义的方法的一种,而且是最普通的方式 首先,我们已经知道有两种方式: 1.普通方法: 1)与类无关的 ...

  9. 第三章————用SQL语句操作数据

    第三章————用SQL语句操作数据 *********************新增**************************** 1. insert into 表名(列名1,列名2...) ...

  10. Kibana中的Coordinate Map地图报索引错误的问题

    今天做地图定位展示,展示的是ApacheWeb服务器的访问日志文件中的来源IP.但是中间出现了报错环节,说是索引不能匹配到geo_point类型,实在是不懂这是在说什么,后来在网站找了方法就解决了.主 ...