CODEWITHSUNDEEP
javascriptasp.netjqueryhtmlcss
Alex
Alex

Reputation: 11137

can't center div

I've followed the code on this link : Using jQuery to center a DIV on the screen and my div isn't centered . Any ideas why ?

in my javascript error console there seems to be no error . Here is my code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     
<html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
     <title></title>
     <script src="./Scripts/jquery-1.4.1.js" type="text/javascript">
         (function ($) {
             $.fn.extend({
                 center: function () {
                     return this.each(function () {
                         var top = ($(window).height() -  $(this).outerHeight()) / 2;
                         var left = ($(window).width() -  $(this).outerWidth()) / 2;
                         $(this).css({ position: 'absolute', margin: 0, top: (top > 0 ? top : 0) + 'px', left: (left > 0 ? left : 0) + 'px' });
                     });
                 }
             });
         })(jQuery);

         $('#login').center();
     </script> 
     <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
 </head> 
 <body bgcolor="#0066cc">     
     <form id="form1" runat="server">
     <div>
     <h1>Welcome to SeeUBook</h1>         
     </div>
     <div id="login">     
         //some code
       </div>         
     </form>
  </body>
</html>

Upvotes: 0

Views: 248

Answers (2)

George
George

Reputation: 1

You can just write in CSS:

#content {
     width: 9999px ;/*how wide you want it or you could set it to auto*/
     margin-left: auto ;
     margin-right: auto ;
   }

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630369

You need to run the plugin on the element once it's in the DOM (on document.ready), like this:

$(function() {
  $('#login').center();
});

...currently it's running before there's a id="login" element to find in the page, so it's not centering anything.

Upvotes: 3

Related Questions