假设有一个布局，希望让其中的容器div在屏幕上水平居中，则只需要定义div的宽度，然后将水平外边距设置为auto

<body>

    <div class="wrapper"> </div>

</body>

.wrapper{

    width:920px;

    margin:0 auto;

}

注意：上述方法在现代浏览器中都是有效的，但是，混杂模式中的IE 5.x和IE 6不支持margin:auto声明，但IE将text-align:center误解为让所有东西居中，而不只是文本，可以利用这一点，具体方法是让主体标签中的所有东西居中，包括容器div，然后让容器的内容重新向左对齐：

body{

    text-align:center;

}

.wrapper{

    width:920px;

    margin:0 auto;

    text-align:left;

}

ch8 让div居中--使用外边距的更多相关文章

  1. CSS2系列：外边距合并问题(margincollapse)

    外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合 ...

  2. CSS外边距合并（塌陷/margin越界）

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  3. css常用属性：居中展示、内边距、外边距

    1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...

  4. "margin塌陷现象"div盒子嵌套盒子外边距合并现象

    问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...

  5. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  6. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  7. bootstrap之div居中

    bootstrap之div居中 偏移列 偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...

  8. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  9. (转)css内边距与外边距的区别，精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

随机推荐

  1. Mysql与PostgreSql数据库学习笔记

    mysql 从最基础的数据引擎,到进程结构,都不能支持数据版本.导致其职能阻塞“并发”,不支持最基本的事务,innodb达不到基本事务要求,任何写数据,都导致整个表锁住.充其量只能算是一个玩具,或者说 ...

  2. C语言随笔2： rom ram 及其运行的过程

    内存的分配方式 五个区 :堆区.栈区.全局区.文字常量区.程序代码区 这五个区是ram中的.或者说,堆栈段.数据段.代码段 而rom中,没有堆区和栈区,只有数据段和代码段. ram是在程序运行是的内存 ...

  3. 一周搞定模拟电路P3_电容_记录

    1 电容的介绍 什么是电容 它有两个电极板,和中间板所夹的介质封装而成,具有特定功能的电子器件. 电容的作用 旁路.去耦.滤波和储能的作用 2 旁路电容的作用 1)使输入电压均匀化,减少噪声对后级的影 ...

  4. 一周搞定模拟电路P2_二极管介绍_记录

    1 稳压二极管 1.1 稳压二极管伏安特性曲线 ΔIz 这一段为能够达到比较好的稳压效果的稳压电流. 1.2 两种连接方法的比较 2 整流二极管 2.1 特点 用于把交流电变成脉动直流电 3 开关二极 ...

  5. jQuery的ajax方法的属性以及jsonp的随机数问题

    原文地址[ http://www.cnblogs.com/know/archive/2011/10/09/2204005.html ] <!DOCTYPE html PUBLIC "- ...

  6. vue中使用vue-i18n 一个简单的国际化操作

    1.安装:npm install vue-i18n --save-dev 2.在main.js文件中引入: import VueI18n from 'vue-i18n' Vue.use(VueI18n ...

  7. 一个Log-Tan积分

    \[\Large\int_{0}^{\pi }\theta \ln\tan\frac{\theta }{2}\mathrm{d}\theta \] \(\Large\mathbf{Solution:} ...

  8. Java补强转

    /* 对于byte/short/char三种类型来说,如果右侧赋值的数值没有超过范围, 那么javac编译器将会自动隐含地为我们补上一个(byte)(short)(char). 1. 如果没有超过左侧 ...

  9. 微信+QQ跳转

    加到对应页面的</body> 上面,或者<head> </head>之间 <script type="text/javascript"&g ...

  10. C语言：对长度为7的字符串，除首尾字符外，将其余5个字符按ASCII降序排序。-计算并输出3~n之间所有素数的平方根之和。

    //对长度为7的字符串,除首尾字符外,将其余5个字符按ASCII降序排序. #include <stdio.h> #include <ctype.h> #include < ...