<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">

<!--设置DIV块的边界为5px-->

div{margin:5px;border:0;padding:0;}

#Box1{

    width:200px;

    height:72px;

    background-color:#666;

}

#Box2{

    width:200px;

    height:72px;

    background-color:#F0F;

}

</style>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>让上下两个DIV块之间有一定距离或没有距离</title>

</head>

<body>

<div id="Box1"></div>

<div id="Box2"></div>

</body>

</html>

DIV上下居中的更多相关文章

  1. 左边图标右边文字，在div里居中

  2. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  3. HTML5：footer定位（底部+居中）的探讨+div图片居中问题

    初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...

  4. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  5. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...

  6. css 如何使图片与文字在div中居中展示？

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  7. jQuery实现的浮动层div浏览器居中显示效果

    本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...

  8. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  9. img在div中居中的问题

    Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中:(有的设计师为图片再加个div标签,然后通过 ...

  10. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝ ...

随机推荐

  1. Xmpp实现简单聊天系列 --- ②用户注册和登陆

    不管是注册还是登陆,亦或是聊天等功能,都必须先进行服务器连接,连接代码如下 ①自定义Xmpp连接工具类:     ②调用创建连接的方法:     ③连接服务器方法:       *注意 连接方式为客服 ...

  2. SQL Server特殊用法笔记

    1. MERGE用法:关联两表,有则改,无则加 SQL语句: create table #AAA(id int,A int,AA int,AAA int,B int) create table #BB ...

  3. 读书笔记 effective c++ Item 44 将与模板参数无关的代码抽离出来

    1. 使用模板可能导致代码膨胀 使用模板是节省时间和避免代码重用的很好的方法.你不需要手动输入20个相同的类名,每个类有15个成员函数,相反,你只需要输入一个类模板,然后让编译器来为你实例化20个特定 ...

  4. ls命令的20个实用范例

    contents ls -l -h -lhS -l --block-size=M -a -d */ -g -G -n --color=never -i -p -r -R -t ls ~ ls --ve ...

  5. Java中ArrayList,Vector,LinkedList,HashMap,HashTable,HashSet对比及总结

    1.所有的集合的父类都是Collection的接口 2.Set List Map 区别 A  在Set里面:无法添加元素的顺序,所以Set里面的元素不能重复 B  在List中:有索引号,类似于数组, ...

  6. jQuery的发展史

    jQuery的发展史,你知道吗? 每天多学一点知识,就少写一行代码2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间).虽然过了这么久,但它依然以其简洁. ...

  7. 你不得不知的逻辑或(||)与(&&)非(!)

    最近重新翻开原生JS,又得到很多不同的体会,虽然现在开发框架那么多,但很多思想都还是离不开原生的基础.今天呢,我就根据自己的学习总结一下逻辑与(&&)和(逻辑或(||)和逻辑非(!). ...

  8. webapp 1px显示两倍的问题

    公司最近换新首页,按照设计师的要求<大家都在逛>的分割线要1个像素. .span-3{ width:33.3333%; &:not(:first-child){ &:bef ...

  9. 想询问一个职业规划的问题，前端开发 or nodejs?

    先说说个人情况,目前个人定位于初中级前端吧,工作近两年,目前前端开发和nodejs都有一定的了解,水平感觉可以搭一些小型的网站.作为前端开发,目前掌握的技术是javascript,平时更多的是用jqu ...

  10. File Transfer

    本博客的代码的思想和图片参考:好大学慕课浙江大学陈越老师.何钦铭老师的<数据结构> 代码的测试工具PTA File Transfer 1 Question 2 Explain First, ...