假设有一个布局，希望让其中的容器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. 萌新深度学习与Pytorch入门记录（一）：Win10下环境安装

    深度学习从入门到入土,安装软件及配置环境踩了不少坑,过程中参考了多处博主给的解决方法,遂整合一下自己的采坑记录. (若遇到不一样的错误,请参考其他博主答案解决) 笔者电脑系统为win10系统,在此环境 ...

  2. rg.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'TL_C_CONS_ExtendController':

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'TL_ ...

  3. SIM7600CE TCP/IP连接与PPP拨号上网 4G上网

    SIM7600CE联网测试分为两部分: 1.TCP/IP连接 2.PPP拨号上网 实验环境:ubuntu-meta 16.04 硬件:树莓派3B,SIM7600CE 上网卡:移动的NB-IOT物联网卡 ...

  4. 【struts 报错】 No action config found for the specified url

    1 type Exception report message org.apache.struts.chain.commands.InvalidPathException: No action con ...

  5. C++中使用sstream进行类型转换（数字字符串转数字、数字转数字字符串）

    1.sstream知识 sstream即字符串流.在使用字符串流sstream时,需要先引入相应的头文件 "#include <sstream>" 基本操作 // 引入 ...

  6. cnblogs 自定义主题字体渲染方案

    渲染效果图 由于我一直偏好衬线字体,所以在采用 Silence 主题 之后,还参照谢益辉的博客字体方案进行了改进 首先,在页首代码中添加盘古之白,如果你同时编写 中/英 文博客,你当然应该学习谢益辉的 ...

  7. NET在64位系統使用32位oracle客户端访问数据库

    客户在win7 64位系统中安装32位的ora客户端,NET 安装后连线数据库 引发BadImageFomatException. 按客户机安装64位ora客户端也不现实,可能会影响其他应用的正常使用 ...

  8. next_permutation的使用-Hdu1027

    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  9. Python分析盘点2019全球流行音乐：是哪些歌曲榜单占领了我们？

    写在前面:圣诞刚过,弥留者节日气息的大家是否还在继续学习呐~在匆忙之际也不忘给自己找几首好听的歌曲放松一下,缠绕着音乐一起来看看关于2019年流行音乐趋势是如何用Python分析的吧! 昨天下午没事儿 ...

  10. 喵星之旅-狂奔的兔子-svn安装及使用

    一.服务端安装配置 1.安装svn 创建版本库并配置 以root用户登录,或者具有sudo权限的用户,这里选择root. yum install subversion 都选择y 2.创建版本库并配置 ...