Advanced Search

align center div

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="jquery-1.5.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. 	var top;
  10. 	var $div = $('#centro');
  11. 	$(window).bind('scroll resize',function(){
  12. 		$div.html($(this).scrollTop());
  13. 		top = $(this).scrollTop() + ($(this).height()-$div.outerHeight())/2;	
  14. 		$div.css('top', top+'px');
  15. 	});
  16. 	$(window).trigger('scroll');
  17. });
  18. </script>
  19. <style type="text/css">
  20. 	#centro {
  21. 		width: 500px;
  22. 		height: 350px;
  23. 		padding: 10px;
  24. 		border: solid 1px #666;
  25. 		background: #EAEAEA;
  26.  
  27. 		position: absolute;
  28. 		left: 50%;
  29. 		margin-left: -250px;
  30. 	}
  31. </style>
  32. </head>
  33.  
  34. <body>
  35. <div id="centro">:D</div>
  36. <p>adasdasdas</p>
  37. <p>adasdasdas</p>
  38. <p>adasdasdas</p>
  39. <p>adasdasdas</p>
  40. <p>adasdasdas</p>
  41. <p>adasdasdas</p>
  42. <p>adasdasdas</p>
  43. <p>adasdasdas</p>
  44. <p>adasdasdas</p>
  45. <p>adasdasdas</p>
  46. <p>adasdasdas</p>
  47. <p>adasdasdas</p>
  48. <p>adasdasdas</p>
  49. <p>adasdasdas</p>
  50. <p>adasdasdas</p>
  51. <p>adasdasdas</p>
  52. <p>adasdasdas</p>
  53. <p>adasdasdas</p>
  54. <p>adasdasdas</p>
  55. <p>adasdasdas</p>
  56. <p>adasdasdas</p>
  57. <p>adasdasdas</p>
  58. <p>adasdasdas</p>
  59. <p>adasdasdas</p>
  60. <p>adasdasdas</p>
  61. <p>adasdasdas</p>
  62. <p>adasdasdas</p>
  63. <p>adasdasdas</p>
  64. <p>adasdasdas</p>
  65. <p>adasdasdas</p>
  66. <p>adasdasdas</p>
  67. <p>adasdasdas</p>
  68. <p>adasdasdas</p>
  69. <p>adasdasdas</p>
  70. <p>adasdasdas</p>
  71. <p>adasdasdas</p>
  72. <p>adasdasdas</p>
  73. <p>adasdasdas</p>
  74. <p>adasdasdas</p>
  75. <p>adasdasdas</p>
  76. <p>adasdasdas</p>
  77. <p>adasdasdas</p>
  78. <p>adasdasdas</p>
  79. <p>adasdasdas</p>
  80. <p>adasdasdas</p>
  81. <p>adasdasdas</p>
  82. <p>adasdasdas</p>
  83. <p>adasdasdas</p>
  84. <p>adasdasdas</p>
  85. <p>adasdasdas</p>
  86. <p>adasdasdas</p>
  87. <p>adasdasdas</p>
  88. <p>adasdasdas</p>
  89. <p>adasdasdas</p>
  90. <p>adasdasdas</p>
  91. <p>adasdasdas</p>
  92. <p>adasdasdas</p>
  93. <p>adasdasdas</p>
  94. <p>adasdasdas</p>
  95. <p>adasdasdas</p>
  96. <p>adasdasdas</p>
  97. <p>adasdasdas</p>
  98. <p>adasdasdas</p>
  99. <p>adasdasdas</p>
  100. <p>adasdasdas</p>
  101. <p>adasdasdas</p>
  102. <p>adasdasdas</p>
  103. <p>adasdasdas</p>
  104. <p>adasdasdas</p>
  105. <p>adasdasdas</p>
  106. <p>adasdasdas</p>
  107. <p>adasdasdas</p>
  108. <p>adasdasdas</p>
  109. <p>adasdasdas</p>
  110. <p>adasdasdas</p>
  111. <p>adasdasdas</p>
  112. <p>adasdasdas</p>
  113. <p>adasdasdas</p>
  114. <p>adasdasdas</p>
  115. <p>adasdasdas</p>
  116. <p>adasdasdas</p>
  117. <p>adasdasdas</p>
  118. <p>adasdasdas</p>
  119. <p>adasdasdas</p>
  120. <p>adasdasdas</p>
  121. <p>adasdasdas</p>
  122. <p>adasdasdas</p>
  123. <p>adasdasdas</p>
  124. <p>adasdasdas</p>
  125. <p>adasdasdas</p>
  126. <p>adasdasdas</p>
  127. <p>adasdasdas</p>
  128. <p>adasdasdas</p>
  129. </body>
  130. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.