假设有一个布局，希望让其中的容器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. opencv：图像查找表 与 颜色表

    LUT 使用 颜色查找表 example LUT applyColorMap // 读入制作好的lut.png Mat color = imread("D:/images/lut.png&q ...

  2. opencv：图像直方图均衡化

    // 直方图均衡化 Mat gray, dst; cvtColor(src, gray, COLOR_BGR2GRAY); equalizeHist(gray, dst); imshow(" ...

  3. 201771010135 杨蓉庆AND张燕 《面对对象程序设计（java）》第十一周学习总结

    1.实验目的与要求 (1) 掌握Vetor.Stack.Hashtable三个类的用途及常用API: (2) 了解java集合框架体系组成: (3) 掌握ArrayList.LinkList两个类的用 ...

  4. SSIS部署后执行失败，无法将保护的XML节点解密

    将包属性中的 protectionLevel 设置成DontSaveSensitive 即可.

  5. Python - int()

    参考 https://docs.python.org/3/library/functions.html?highlight=int#int If x is not a number or if bas ...

  6. 以 CheatEngine 为例的六个质量属性

    日期:2020.02.23 博客期:158 星期日 这个软件是什么? 首先你可能不认识 CE 修改器,那我就简单一句话说明一下,Cheat Engine 是一款能够编辑进程内存的.能够编译分析汇编语言 ...

  7. @ModelAttribute与@RequestBody的区别

    一.@ModelAttribute与@RequestBody的区别 @ModelAttribute与@RequestBody都是用来注解解析前端发来数据,并自动对应到所定义的字段名称. 这里先放结论, ...

  8. 使刚编辑的vim编辑器配置文件立即生效（实为自动生效）

    简单的说,在虚拟机下安装的Centos6.3系统后,默认的是没有vim编辑器的配置文件,此时如果有必要,可以按照自己的习惯定制或配置自己的vim编辑器: 1,如果你是root权限,进入root目录下: ...

  9. 快速创建vue 项目

    随着VUE 技术的不断更新,越来越多的开发者开始使用vue编写前端界面,今天我就和大家分享一下 ,如何快速创建一个vue项目. 前提: 安装了node.js 首先: 全局安装vue-cli 使用命令: ...

  10. HDU 4699 Editor(模拟 对顶栈)

    题目大意: 给定一个整数序列 维护5种操作 次数<1e6 I x: 光标位置插入x 然后光标位于x之后 D: 删除光标前一个数 L: 光标左移 R: 光标右移 Q k: 询问位置k之前的最大前缀 ...