jquery实现div垂直居中

时间:2022-06-18 09:50:48

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>

我的纸递兵