插入并列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 ...
随机推荐
- chrome 模拟点击
实现进入一个页面后触发一个<a>的点击事件. 由于safari和chrome不支持<a>的click()所以需要对浏览器进行判断 var Sys = {}; var ua ...
- [译]Quartz 框架 教程（中文版）2.2.x 之第一课 开始使用Quartz框架
第一课:开始使用Quartz框架 在你使用调度器之前,需要借助一些具体的例子去理解(谁愿意只是猜啊?).你可以使用SchedulerFactory类来达到程序调度的目的.有一些Quartz框架的用户可 ...
- ios基础篇（二）——UIImageView的常见用法
UIImageView是在界面上显示图片的一个控件,在UIImageView中显示图片的话应该首先把图片加载到UIImage中,然后通过其他方式使用该UIImage. 创建UIImageView有两种 ...
- Android WebView的使用
WebView是View的一个子类,使用它可以在App中嵌入H5页面,可以跟js互相调用. webview有两个方法:setWebChromeClient和setWebClient setWebCli ...
- BZOJ1722 [Usaco2006 Mar] Milk Team Select 产奶比赛
直接树形dp就好了恩 令$f[i][j][t]$表示以$i$为根的子树,选出来的点存在$j$对父子关系,$t$表示$i$这个点选或者没选,的最大产奶值 分类讨论自己和儿子分别有没有选,然后转移一下就好 ...
- case when的用法
国家(country)人口(population) 中国600 美国100 加拿大100 英国200 ...
- 发送广播BroadcastReceiver
import android.os.Bundle;import android.app.Activity;import android.content.Intent;import android.vi ...
- 告别硬编码-发个获取未导出函数地址的Dll及源码
还在为找内核未导出函数地址而苦恼嘛? 还在为硬编码通用性差而不爽吗? 还在为暴搜内核老蓝屏而痛苦吗? 请看这里: 最近老要用到内核未导出的函数及一些结构,不想再找特征码了,准备到网上找点符号文件解析的 ...
- websocket++编译过程
websocket++ 是一个开源 websocket 库,使用websocket++ 能够开发基于websocket 服务. 前一段时间成功编译 websocket++ ,分享一下,编译websoc ...
- Hello Struts2
Struts2 概述 Struts2 是一个用来开发 MVC 应用程序的框架. 它提供了 Web 应用程序开发过程中的一些常见问题的解决方案: 对来自用户的输入数据进行合法性验证; 统一的布局; 可扩 ...