假设有一个布局，希望让其中的容器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. js兼容安卓和IOS的复制文本到剪切板

    1.在做点击按钮复制功能时遇到了小小的卡顿,此处遇到了两种系统手机的兼容性 / 复制后会对文本进行选中 / 输入法弹出 等.现将方法进行总结,如下代码很好对解决了以上问题,适用性强. 2.在文本此处使 ...

  2. 【C语言】逗号运算符的使用举例

    #include<stdio.h> int main(void) { , b = , c = , y, z; y = a + b, a + c;/*由y=a+b和a+c组成的逗号表达式*/ ...

  3. mysql之mysql的安装

    此次MySQL安装的版本为:MySQL8.0 系统为:centos6.9 64位 一.利用yum仓库安装 wget https://repo.mysql.com//mysql80-community- ...

  4. 使用JavaScript获取样式的属性值

    1 . 在js中可以使用style属性来获取样式的属性值(只能获取内联样式的属性值) 语法格式为: HTML元素.style.样式属性; 2 .   在IE浏览器中,使用currentStyle来获取 ...

  5. centos7 安装pip2和pip3

    linux pip2 安装cd /usr/bin yum install -y epel-release yum install -y python-pip _____________________ ...

  6. Java日期时间API系列19-----Jdk8中java.time包中的新的日期时间API类，ZonedDateTime与ZoneId和LocalDateTime的关系，ZonedDateTime格式化和时区转换等。

    通过Java日期时间API系列6-----Jdk8中java.time包中的新的日期时间API类中时间范围示意图:可以很清晰的看出ZonedDateTime相当于LocalDateTime+ZoneI ...

  7. Bugku-CTF社工篇之信息查找

  8. POJ 1204 Word Puzzles（AC自动机）

    这题的数据卡在,如下: 5 5 3 ABCDE FGHIJ KLMNO PQRST UVWXY PQR RS RST puzzle中间的行中可以包含要查询的多个单词.这个问题很好解决,SearchDf ...

  9. Cisco AP-Mobility Express基础

    Part I 介绍 1.1基本概况 Cisco Mobility Express这个名词出现在Cisco “8”系列的AP上,例如现在的AP1852,AP2802,AP3802等都是Mobility ...

  10. ResultSet指针回到初始位置的方法及ResultSet介绍

    原文地址: https://blog.csdn.net/walkerjong/article/details/7023872 仅供学习参考使用. 结果集(ResultSet)是数据中查询结果返回的一种 ...