• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 354
  • Last Modified:

jquery - center an element

Is there a slick way to have jquery center the selected element?

 if($('span[id*="lblCatNameID"]'))
        {        
            this.css("position", "absolute");
            this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
            this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
            return this;
        }



seems not to work
0
Tom Knowlton
Asked:
Tom Knowlton
2 Solutions
 
Gurvinder Pal SinghCommented:
assuming that 'this' object handle you already have for the element to be centered. And it needs to be centered inside the window, not necessarily its parent

function centerThis(obj)
{
 var winHeight = $(window).height();
 var winWidth = $(window).width();
 obj.css("position", "absolute");
 obj.css("top", ( winHeight - this.height( ) ) / 2  + "px" ) ;
 obj.css("left", ( winWidth - this.width( ) ) / 2  + "px" );
}
0
 
Kiran SonawaneProject LeadCommented:
Check this



<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
   $('span[id*="lblCatNameID"]').center();
  });
  
  
  (function($){
    $.fn.extend({
        center: function () { alert("DD");
            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);


  </script>
  <title>Kiran Test</title>
  </head>
  <body>
   
   <span id="lblCatNameID"><h1>Centre Element<h1></span>   

  </body>
  </html>

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
thx
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now