假设有一个布局，希望让其中的容器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. 开源协议：LGPL协议、OSGi协议

    本文介绍开源的协议. LGPL 是 GNU Lesser General Public License (GNU 宽通用公共许可证)的缩写形式,旧称 GNU Library General Publi ...

  2. 普及C组第一题（8.1）

    1999. [2015.8.6普及组模拟赛]Wexley接苹果(apple) 题目: Wexley最近发现了一个古老的屏幕游戏.游戏的屏幕被划分成n列.在屏幕的底端,有一个宽为m列的篮子(m<n ...

  3. LeetCode日常小习题

    LeetCode练习题: 1.给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在众数. 示例 1: 输入 ...

  4. Chrome浏览器切页快捷键

    Chrome浏览器切换标签页快捷键 1.Ctrl + Tab 向左切换标签页 2.Ctrl + shift + Tab 向右切换 3.Ctrl + 1 切换到第一个页面 4.Ctrl + 9 切换到最 ...

  5. 【代码学习】PYTHON 函数

    一.定义函数 def 函数名(): 代码 二.函数调用 #定义函数 def printme(str): print str return #调用函数 printme("SQYY1" ...

  6. IDEA 创建 Spring Boot 多模块项目（Multi Modules）

    本准备写点代码实例放到网站,太多的模板,反而每次新建工程的时候很麻烦.于是准备把这个章节的内容提前先讲讲.正好把这个代码也管理起来.话说这个多模块功能还挺爽. 写过 C# 项目用过 Visual St ...

  7. springMVC的跳转

    服务器内部跳转: return "forward:/forward/test1";  或者 request.getRequestDispatcher(path).forward(r ...

  8. RADIUS Authentication with WPA2-Enterprise

    概观具有802.1X身份验证的WPA2-Enterprise可用于对域中的用户或计算机进行身份验证.请求方supplicant(无线客户端)使用RADIUS服务器上配置的EAP方法对RADIUS服务器 ...

  9. ANSYS 非线性材料模型简介1 ---常用弹塑性模型

    目录 1. 材料非线性 2. 三个准则 2.1 屈服准则 2.2 流动准则 2.3 强化准则 3. 常用弹塑性模型 3.1 双线性等向强化 3.2 多线性等向强化 3.3 非线性等向强化 3.4 双线 ...

  10. ➡️➡️➡️IELTS reading by Simon on Bili

    高分必备 雅思考官Simon手把手教你做阅读 p1 https://www.bilibili.com/video/av40131278?p=2 p2 https://www.bilibili.com/ ...