垂直居中，水平居中html例子
<!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">用户 <input type="text" /></div>
<div class="child">密码 <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例子的更多相关文章
- Aspose.Words操作Word.PDF,让图片和文本垂直居中,水平居中解决方案
x 环境 { "Aspose.Words": {"Version":"18.x"} } 需求与难题 生成试卷的时候,如果数学题目中有特殊符号 ...
- [css]实现垂直居中水平居中的几种方式
转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...
- [转] 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
转自:http://blog.csdn.net/freshlover/article/details/11579669 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用marg ...
- CSS3实现 垂直居中 水平居中 的技巧
1 1 1 How To Center Anything With CSS Front End posted by Code My Views 1 Recently, we took a dive i ...
- 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width
一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
- CSS3实现DIV垂直居中+水平居中的四种方法
<div class="div1"> <div class="div2"></div> </div> html结 ...
- div垂直居中水平居中css
width: 860px; height: 500px; position: absolute; margin-left: -430px; margin-top: -250px; top: 50%; ...
- div水平居中和垂直居中
水平居中和垂直居中 水平居中包含两种情况: 块级元素的水平居中:margin:0px auto; 文字内容的水平居中:text-align: center; ...
随机推荐
- ContentProvider官方教程(6)provider支持的数据类型
Provider Data Types Content providers can offer many different data types. The User Dictionary Provi ...
- Intent官方教程(4)用Intent构造应用选择框
Forcing an app chooser When there is more than one app that responds to your implicit intent, the us ...
- 【Linux】vi（vim）起步学起来有些困难，一步一步温习
以Tomcat的配置文件service.xml为例,记录.学习vi的最常用操作. > 什么是vi or vim? [nicchagil@localhost bak]$ man vi VIM() ...
- 我的android学习经历29
四大组件之广播接收者BroadcastReceiver 新建广播接收器 需要新建一个类继承类BroadcastReceiver,并且重写其中的方法onReceive(),不要在这个方法中添加过多的逻辑 ...
- 【leetcode❤python】191. Number of 1 Bits
#-*- coding: UTF-8 -*- class Solution(object): def hammingWeight(self, n): if n<=0:retu ...
- UVALive 6500 Boxes
Boxes Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Status Pract ...
- CVE-2015-7547
危险漏洞补丁修复通知 漏洞编号 漏洞编号为CVE-2015-7547 漏洞说明: Google安全团队近日发现glibc存在的溢出漏洞. glibc的DNS客户端解析器中存在基于栈的缓冲区溢出漏洞.当 ...
- windows c dll的创建与调用
DLL代码: // TestDynamic.cpp: implementation of the TestDynamic class. // ///////////////////////////// ...
- 3.mybatis注解
在上篇2.mybatis入门实例(一) 连接数据库进行查询的基础上 1.添加Mapper接口:UserMapper接口,并使用mybatis的注解 import java.util.List; imp ...
- Hibernate之N+1问题
什么是hibernate的N+1问题?先了解这样一个描述: 多个学生可以对应一个老师,所以student(n)---teacher(1).Stu类中有一个属性teacher.在hibernate配置文 ...