ch8 让div居中--使用外边距
假设有一个布局,希望让其中的容器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居中--使用外边距的更多相关文章
- CSS2系列:外边距合并问题(margincollapse)
外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合 ...
- CSS外边距合并(塌陷/margin越界)
原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...
- css常用属性:居中展示、内边距、外边距
1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...
- "margin塌陷现象"div盒子嵌套盒子外边距合并现象
问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- bootstrap之div居中
bootstrap之div居中 偏移列 偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...
- css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
- (转)css内边距与外边距的区别,精辟啊
css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...
随机推荐
- BUUCTF-Web-Warm Up(CVE-2018-12613)
题目(虽然是Warm up,但一点也不简单): 打开只有图片,源码里面提示了source.php 查看source.php: php代码里又提到了hint,去查看一下: 提示flag在如上图文件名里面 ...
- Codeforces Round #618 E
题意: 给你一个n的数组,你可以进行无数次,选择区间使得区间内的值相加,然后区间的所有的值变成平均值. 使得最后数组的字典序最小 思路: 最后的数组一定是单调递增的,只要它比之前的平均值数大,就不会操 ...
- 计算机二级-C语言-对文件的读写操作。链表的定义与赋值。对字符串的遍历和处理。
//程序填空题:在此程序中,通过定义学生结构体变量,存储了学生的学号,姓名和三门课的成绩.所有学生数据均以二进制方式输出到文件中.函数fun()函数的功能是重写形参filename所指文件中最后一个学 ...
- 「JSOI2013」侦探jyy
「JSOI2013」侦探jyy 传送门 个人感觉我写的复杂度不够优秀啊,但是好像没有别的办法了... 我们枚举每个点,考虑这个点能不能不发生. 首先我们从这个点开始,在反图上面 \(\text{BFS ...
- 《JavaScript高级程序设计》读书笔记(四)变量、作用域和内存问题
内容---理解基本类型和引用类型的值---理解执行环境---理解垃圾收集 --JavaScript变量松散类型的本质--决定了它只是在特定时间用于保存特定值的一个名字而已--变量的值及其数据类型可以在 ...
- MyBatis-Plus学习笔记(3):分页查询
依赖配置可参考:MyBatis-Plus学习笔记(1):环境搭建以及基本的CRUD操作 分页配置 @Configuration public class PlusConfig { @Bean publ ...
- SmartAssembly批处理用法
在SmartAssembly.exe根目录有个SmartAssembly.com . 在命令行执行SmartAssembly.com就能看到所有的命令参数了. 用SmartAssembly.exe建好 ...
- spring boot jpa 复杂查询 动态查询 连接and和or 模糊查询 分页查询
最近项目中用到了jpa,刚接触的时候有些激动,以前的到层忽然不用写sql不用去自己实现了,只是取个方法名就实现了,太惊艳了,惊为天人,但是慢慢的就发现不是这么回事了,在动态查询的时候,不知道怎么操作了 ...
- java操作nginx
一,判断程序的部署环境是nginx还是windows /** * 判断操作系统是不是windows * * @return true:是win false:是Linux */ public stati ...
- Yar并行的RPC框架的简单使用
前言: RPC,就是Remote Procedure Call的简称呀,翻译成中文就是远程过程调用 RPC要解决的两个问题: 解决分布式系统中,服务之间的调用问题. 远程调用时,要能够像本地调用一样方 ...