jquery实现div垂直居中

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#text1{width: 500px; border: 1px solid #ccc; height: 500px; margin: 0px auto }
.text2{float: left; border: 1px solid #ccc;width:40%;word-wrap:break-word;text-align:center;}
</style>
<script type="text/javascript">
$(function(){
$(".text2").middle();
});
(function( $ ){
$.fn.middle=function(){
return this.each(function(){
$top=(($(this).parent().height()-$(this).height()-2)/2)+"px";
$(this).css("marginTop",$top);
});
};
})( jQuery );
</script>
</head>
<body>
<div id="text1">
<div class="text2">22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
</div>
<div class="text2" style="float: right;">3333333333333333333333333333333333
</div>
</div>
</body>
</html>
jquery实现div垂直居中的更多相关文章
- 让div垂直居中于浏览器窗口
<style type="text/css"> div { position:absolute; top:50%; left:50%; margin ...
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- jquery给div,Span, a ,button, radio 赋值取值
jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html(&quo ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- div垂直居中的问题
工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...
- 由12306出错想到的div垂直居中的问题
今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了 看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下1 ...
- jquery判断div是否显示或者隐藏
jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...
- jquery实现DIV层拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript和JQuery获取DIV的值
1.设计源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
随机推荐
- es3中使用es6/7的字符串扩展
最近在看阮一峰的<ES6标准入门>,在字符串扩展一节中有提到几个新的扩展,觉得挺有意思,想在ES3里面使用,于是就有下面的兼容性写法. repeat 将一个字符串重复n次 String.p ...
- java 成神之路
一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http://www.jcp.org/en/jsr/detail?id=133 http://i ...
- rowid的作用
一.快速删除重复的记录的方法: 1.通过创建临时表删除重复的的记录 1)创建emp表的临时表,把数据导入临时表中,删除原来的表中的数据然后把临时表中的数据导入原表 create table emp_t ...
- css 兼容小三角
<!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...
- 用户登录之cookie信息安全一二事
大家都知道用户登陆后,用户信息一般会选择保存在cookie里面,因为cookie是保存客户端, 并且cookie可以在客户端用浏览器自由更改,这样将会造成用户cookie存在伪造的危险,从而可能使伪造 ...
- python运维开发(十)----IO多路复用线程基本使用
内容目录: python作用域 python2.7和python3.5的多继承区别 IO多路复用 socketserver模块源分析 多线程.进程.协程 python作用域 python中无块级作用 ...
- Red and Black(水)
Red and Black Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- 1041. Be Unique (20)
Being unique is so important to people on Mars that even their lottery is designed in a unique way. ...
- 03-树2. Tree Traversals Again (25)
03-树2. Tree Traversals Again (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue ...
- 进程外Session和进程内Session存储