插入并列div使其居中
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style type="text/css">
html,body,div {margin: 0;padding: 0}/*、在 content 元素外插入一个 div
并设置此 div height:50%; margin-bottom: -(contentheight + padding)/2;。
比如content高度为100px,总padding为20px ，则margin-bottom: -60px 将content挤下去
缺点就是增加了无意义的标签，但优点是简便而且IE6也得到兼容*/
.box {
margin: 20px auto;
width: 200px;
height: 600px;
background: black;
}
.floater {
height:50%;
margin-bottom: -50px;
}
.content {
margin: 0 auto;
padding: 10px;
width: 100px;
height: 100px;
border: 2px solid #adf;
background: #abc;
}
</style>
</head>
<body>
<div class="box">
<div class="floater"></div>
<div class="content"></div>
</div>
</body>
</html>
插入并列div使其居中的更多相关文章
- div中实现居中
今天纠结了大半天的居中,把学到的先记录下来,还没完全弄清楚,发现网上原创的技术贴并不算多,大多都是相互转载.(ps.先安利一个大神的帖集,昨天才发现的,内容丰富,语言,呃...很幽默,一般都是图文并茂 ...
- 如何让图片在div里左右居中，上下居中
如何让图片在div里左右居中,上下居中 转载▼ 1.要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现. 2.要想使图片居 ...
- 【前端】使用CSS使元素居中的几种方式
Precondition: <div class="parent"> <div class="item">居中</div> ...
- CSS实现DIV水平自适应居中
DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...
- 如何让div上下左右都居中
在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
- 并列div自动等高
并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 常用布局，div竖直居中
常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...
- div元素上下左右居中
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Latex: 使 tabular 居中
参考: How to center the table in Latex Latex: 使 tabular 居中 解决方法1: { \centering \begin{tabular} ... \en ...
随机推荐
- swiftlint升级
~/Opal/iOS/App (mike/lyrics) $ which brew/usr/local/bin/brew~/Opal/iOS/App (mike/lyrics) $ cd /usr/l ...
- cycleInterpolator 循环加速器
CycleInterpolator Repeats the animation for a specified number of cycles. The rate of change follows ...
- SharedPreferences详解
我们在开发软件的时候,常需要向用户提供软件参数设置功能,例如我们常用的微信,用户可以设置是否允许陌生人添加自己为好友. 对于软件配置参数的保存, 如果是在window下通常我们会采用ini文件进行保存 ...
- Java数据库移植框架
http://www.oschina.net/news/60591/flyway-3-2-released flyway 是一个敏捷工具,用于数据库的移植.采用 Java 开发,支持所有兼容 JDBC ...
- for循环的嵌套——7月24日
练习一:输入一个正整数,用for循环嵌套求阶乘的和 //输入一个正整数,求1!+2!+....+n! 用for循环嵌套 Console.Write("请输入一个正整数:"); ...
- 7月13日微软MVP社区夏日巡讲北京站活动现场图集
1.活动签到 2.活动准备工作,到场同学很多. 3.讲师讲桌 全体合影,由于我在楼下签到所以里面没有我:(
- Oracle “dba_tables”介绍
DBA_TABLES describes all relational tables in the database. Its columns are the same as those in ALL ...
- webApi跨域
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...
- 文件浏览器及数码相框 -2.3.2-freetype_arm-2
显示多行文字 两行文字左边对齐 简单使用两个循环显示两行字体 根据上一行字体的宽度来进行下一行左边的计算 #include <sys/mman.h> #include <sys/ty ...
- html,body最顶层元素.
1,元素百比分是相对父元素,所有元素默认父元素是body. absolute,fixed[只有一个父元素,浏览器窗口]除外[浏览器窗口,为父元素].css3:vh,vw也永远相对,浏览器窗口.heig ...