Question

我已按照此链接上的代码：Using jQuery to center a DIV on the screen并且我的div未居中。有什么想法吗？

在我的javascript错误控制台中似乎没有错误。这是我的代码：

<!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>

Answer 1

你需要在元素中运行插件（在document.ready上），如下所示：

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

...目前它正在运行之前，在页面中有一个id="login"元素，因此它不会集中任何内容。

Answer 2

当你申请“position：absolute;”时在div上，你必须确保它的父母有“position：relative”。 CSS属性，否则它不会起作用，或者您可能会遇到奇怪的定位（相对于另一个div，它是它自己的父级）。

有重复的帖子，请参阅此Using jQuery to center a DIV on the screen

Answer 3

你可以用CSS编写：

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

不能居中

3 个答案:

你可以用CSS编写：