<!DOCTYPE html>

<html lang="en">

<head>

<title>Vertical Centering with Equal Top and Bottom Padding</title>

<meta charset="utf-8">

<meta name="description" content="" />

<style type="text/css">

#parent {

background: #ccc;

}

/* horizontal centering */

#parent {

width: 400px;

margin: 20px auto;

}

.child {

text-align: center;

background: #999;

color: #fff;

}

/* vertical centering */

#parent {

padding: 5% 0;

}

.child {

padding: 1% 0;

}

body {

margin: 0px auto;

background-color: beige;

}

</style>

</head>

<body>

<form>

<div id="parent">

<div class="child">用户&nbsp;<input type="text" /></div>

<div class="child">密码&nbsp;<input type="text" /></div>

<div class="child"></div>

<div class="child" style="background: #ccc;">

<input type="submit" value="登录" style="width:80px;" /></div>

</div>

</form>

<script type="text/javascript">

var p = document.getElementById("parent");

resize_fn = function (e) {

var zbody_height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);

var zdiv_height = Math.max(p.scrollHeight, p.clientHeight);

var ztop = (zbody_height - zdiv_height) / 2;

p.style.marginTop = ztop + "px";

};

//var w = document.getElementsByClassName("child");

var w = document.querySelectorAll(".child");

for (var i = 0; i < w.length;i++) {

var oi = w.item(i);

oi.style.background = "#ccc";

}

//p.style.background = "beige";

resize_fn();

document.body.onresize = resize_fn;

</script>

</body>

</html>

垂直居中，水平居中html例子的更多相关文章

  1. Aspose.Words操作Word.PDF,让图片和文本垂直居中,水平居中解决方案

    x 环境 { "Aspose.Words": {"Version":"18.x"} } 需求与难题 生成试卷的时候,如果数学题目中有特殊符号 ...

  2. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  3. 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

    Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...

  4. [转] 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

    转自:http://blog.csdn.net/freshlover/article/details/11579669 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用marg ...

  5. CSS3实现 垂直居中 水平居中 的技巧

    1 1 1 How To Center Anything With CSS Front End posted by Code My Views 1 Recently, we took a dive i ...

  6. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

    一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...

  7. CSS3实现DIV垂直居中+水平居中的四种方法

    <div class="div1"> <div class="div2"></div> </div> html结 ...

  8. div垂直居中水平居中css

    width: 860px; height: 500px; position: absolute; margin-left: -430px; margin-top: -250px; top: 50%; ...

  9. div水平居中和垂直居中

    水平居中和垂直居中 水平居中包含两种情况:        块级元素的水平居中:margin:0px auto;        文字内容的水平居中:text-align: center;        ...

随机推荐

  1. 阿里巴巴Double分布式服务框架

    开发人员梁飞的blog : http://javatar.iteye.com/ 梁飞关于Double框架的专访: http://www.iteye.com/magazines/103 Double项目 ...

  2. MVC 异步请求

    <head> <meta name="viewport" content="width=device-width" /> <tit ...

  3. NTT

    1 问题描述FFT问题解决的是复数域上的卷积.如果现在的问题是这样:给出两个整数数列$Ai,Bj,0\leq i\leq n-1,0\leq j\leq m-1$,以及素数$P$,计算新数列$Ci=( ...

  4. pivot 与 unpivot 函数是SQL05新提供的2个函数 灰常灰常的实用

    转自:http://blog.sina.com.cn/s/blog_5ef755720100cyo3.html pivot函数: create table test(id int,name varch ...

  5. 关于MySQL数据库如何按时间查询

    这里做了几个测试 select * from simingpai where TIMESTAMP(createTime) >= '2015-9-6'; select * from simingp ...

  6. HQL语句大全（转载）

    Hibernate配备了一种非常强大的查询语言,这种语言看上去很像SQL.但是不要被语法结构 上的相似所迷惑,HQL是非常有意识的被设计为完全面向对象的查询,它可以理解如继承.多态 和关联之类的概念. ...

  7. [HDOJ5877]Weak Pair（DFS，线段树，离散化）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5877 题意:给一棵树和各点的权值a,求点对(u,v)个数,满足:1.u是v的祖先,2.a(u)*a(v ...

  8. ServiceStack.OrmLite 学习笔记7-复杂点的使用1

    复杂点的使用1 先看看这2个类 class Customer { public int Id { get; set; } ... } class CustomerAddress { public in ...

  9. git学习笔记01-git最基本的工作原理分布式

    git学习的网站 http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000  --廖雪峰老师 ...

  10. 转 git使用命令, 特别:git checkout -b a 与 git branch a区别

    创建分支: $ git branch mybranch 切换分支: $ git checkout mybranch 创建并切换分支: $ git checkout -b mybranch 更新mast ...