插入并列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 ...
随机推荐
- 教你如何用PS制作多款按钮UI设计教程
教你如何用PS制作多款按钮UI设计教程 本文教大家制作按钮的方法 LV. ★ 初入设计,学做按钮.只会套个底色,加个阴影,字体纯白,小聪明的弄个圆角. LV. ★★(描边.字体.内阴影) 看了很多案例 ...
- BZOJ3928 [Cerc2014] Outer space invaders
第一眼,我勒个去...然后看到n ≤ 300的时候就2333了 首先把时间离散化,则对于一个时间的区间,可以知道中间最大的那个一定要被选出来,然后把区间分成左右两份 于是区间DP就好了,注意用左开右开 ...
- Spring MVC Controller中解析GET方式的中文参数会乱码的问题(tomcat如何解码)
Spring MVC Controller中解析GET方式的中文参数会乱码的问题 问题描述 在工作上使用突然出现从get获取中文参数乱码(新装机器,tomcat重新下载和配置),查了半天终于找到解决办 ...
- PHP中的include、include_once、require、require_once
include.include_once().require.require_once() 作用: 通过 include 或 require 语句,可以将 PHP 文件的内容插入另一个 PHP 文件( ...
- changepassword.c 0.9：一个通过WEB界面更改LINUX用户密码的程序
偶然看到一个用C语言写的CGI程序,可以以WEB界面(无需单独再写HTML)的方式修改用户自己的密码.该程序具有同时修改samba及squid密码的能力. 步骤: 1.下载并解压,并读一下README ...
- oracle之to_char,to_date用法
[转载自]http://www.jb51.net/article/45591.htm 这篇文章主要介绍了oracle中to_date详细用法示例,包括期和字符转换函数用法.字符串和时间互转.求某天是星 ...
- hdu 4619 Warm up 2
http://acm.hdu.edu.cn/showproblem.php?pid=4619 根据题意可知,每一个方格可能只被一个骨牌覆盖 可能被两个骨牌覆盖 也可能不被覆盖 有一个骨牌覆盖的方格(单 ...
- JSON.NET 教程（一）
下载地址:http://www.newtonsoft.com/json 参考官网文档:http://www.newtonsoft.com/json/help/html/SerializingJSON. ...
- 【STL】-deque的用法
初始化: #include <deque> deque<float> fdeque; 算法: fdeque.push_front(f); fdeque.push_back(f) ...
- Rhel6-heartbeat配置文档
系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.119 server19.example.com 192.168.12 ...