<!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. linux硬盘分区格式化及挂载

    1.硬盘的接口类型 硬盘的接口一般分为两种,一种是IDE并行接口,一种是SATA串行接口, 在linux上面IDE接口的硬盘被识别为/dev/hd[a-z]这样的设备,其中hdc表示光驱设备,这是因为 ...

  2. flume ng之组件介绍

    1.channel 2.source 3.sink 4.直接读取文件Source,有哪两种方式? 5.Channel有几种方式? 6.Sink在设置存储数据时,数据较多,较少的情况下,该如何处理? F ...

  3. Ecplise软件Devices看到两个相同设备问题

    Ecplise软件Devices看到两个相同设备问题 在使用过程中,连接一台设备,在Ecplise软件的Devices界面下突然看到2个设备,如下图: 图1 解决方案:先 kill-server, 再 ...

  4. 【leetcode❤python】237. Delete Node in a Linked List

    #-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):#     def __init ...

  5. 2012 #5 History repeat itself

    History repeat itself Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I6 ...

  6. SQL查看表锁定，死锁解锁

    select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm_tran ...

  7. java中判断从数据库中取出的字段是否为空

    方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低.1:if(s == null || s.equals(""));方法二: 比较字符串长度, 效率高, 是我知道的最好一 ...

  8. Web开发, 跳转时出现java.lang.ClassNotFoundException

    发生这种状况一般都是由于类找不到,要么是web.xml没有配对位置,要么是类没有放好

  9. Ubuntu中文输入法的添加

    做了一个英文环境的Ubuntu14.04LTS,为了写博客方便,添加了中文输入法,在网上搜寻了一堆方法,最后找到个靠谱的. 1 添加fcitx输入法框架.(在此框架下有各种输入法) sudo add- ...

  10. 业务对象和BAPI

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...