<!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. Thymeleaf学习记录（1）--启动模板及建立Demo

    Thymeleaf是什么? Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎.相比于JSP,Thymeleaf更简洁,渲染性能更好,维护性更好,它可以XML/XHTML/HTM ...

  2. 微信小程序 封装请求

    在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装. 1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装) ...

  3. 2017 SCNUCPC 解题报告

    校内赛题目.解题思路.参考代码一览 A. Blackstorm's Blackstore Problem Description Blackstorm is going to open a black ...

  4. 从零开始学习html（六）开始学习CSS，为网页添加样式

    一.认识CSS样式 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  5. 从输入url到页面展示到底发生了什么

    阅读目录 1.输入地址 2.浏览器查找域名的 IP 地址 3.浏览器向 web 服务器发送一个 HTTP 请求 4.服务器的永久重定向响应 5.浏览器跟踪重定向地址 6.服务器处理请求 7.服务器返回 ...

  6. ArcGIS Arcade

    ArcGIS Arcade http://127.0.0.1/Resource/JavaScript/arcgis_js_api/sdk/4.10/latest/guide/arcade/index. ...

  7. .Net Core(二)EFCore

    ​EFCore与之前的EF基本类似,区别在于配置的时候有一些差异:也取消了DB First和Model First,仅保留广泛使用的Code First模式:也不再支持LazyLoad.这里就感受一下 ...

  8. python第六天 函数 python标准库实例大全

    今天学习第一模块的最后一课课程--函数: python的第一个函数: 1 def func1(): 2 print('第一个函数') 3 return 0 4 func1() 1 同时返回多种类型时, ...

  9. 安全之路 —— C/C++实现利用添加注册表项实现文件自启动

    简介 添加注册表项是实现文件自启动的经典方法之一,但因为操作注册表项是一个敏感操作,被报毒可能性较大,但即便如此,这个方法还是值得一学的,因为后期大部分编程都涉及到注册表操作. 最常使用到的注册表项有 ...

  10. 11LaTeX学习系列之---LaTeX的特殊字符

    目录 目录 前言 (一)源代码 (二)输出效果 目录 本系列是有关LaTeX的学习系列,共计19篇,本章节是第11篇. 前一篇:10LaTeX学习系列之---Latex的文档结构 后一篇:12LaTe ...