Posted By

tcelestino on 02/11/11


Tagged

css jquery center align


Versions (?)

align center div


 / Published in: jQuery
 

  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  

You need to login to post a comment.