center object with variable width using jQuery

问题:

Need to center an object whose width changes depending on the browser window. Usually I'd use css with top and left positions set to 50% with a negative margin equal to half the width and height, but obviously that wouldn't accomodate this need.

I thought my jQuery function would work... but no bueno. am i missing something in CSS?

Thanks!

http://jsfiddle.net/danielredwood/EbkLg/2/

Here's the CSS

#t {
        width:25%;
        height:25%; 
        background:red;
    }

JavaScript

$(window).resize(function(){
     resizenow();
});
function resizenow() {
    var browserwidth = $(window).width();
    var browserheight = $(window).height();
    $('#t').css('left', (browserwidth - $(this).width())/2).css('top', (browserheight - $(this).height())/2);
});

回答1:

In your JSFiddle that you linked to you use $(this).width():

$('#t').css('left', ((browserwidth - $(this).width())/2))
.css('top', ((browserheight - $(this).height())/2));

But when the function resizenow() is called, this == window. If you replace $(this) with $("#t") it works fine, as this JSFiddle shows: http://jsfiddle.net/jackfranklin/F2tR3/1/

Within the css() function of jQuery, the value of this is not set to the element whose style(s) you are changing, hence why your original code didn't work.

回答2:

Something like this?

 $(document).ready(function(){  

var browserwidth = $(window).width();
var browserheight = $(window).height();
var x=browserwidth/4;
$('#t').css({'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2  + 'px'});

$(window).resize(function(){

  var browserwidth = $(window).width();
  var x=browserwidth/4;
  var browserheight = $(window).height();

   $('#t').css({'width' : x, 'height' : x,  'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2  + 'px'});
   });


#t {
width: 500px;
height: 500px;
position: relative;
    background:red;
 }


               });

Or if you don't want it to be a square, just don't set width and height in jquery, use percentage in css.

回答3:

It's the way value is getting parsed for the left and top values you're trying to set. If you break them out like this, it works:

var widthDelta = $(window).width() - $('#t').width();
var heightDelta = $(window).height() - $('#t').height();
$('#t').css('left', widthDelta / 2).css('top', heightDelta / 2);

I haven't analyzed exactly what was going wrong - I just looked for something that worked first - I'll have to look at it closer to see what the problem specifically was.

回答4:

jQuery width() and height() returns a unit-less pixel value according to the jQuery documentation.

But when you plug it back into a calculation for jQuery's css(), you need to add the units label "px".

---

EDIT:

If your calculation is based on percentages, then everything is wrong since width() and height() are pixel values. Either way, you still need to add units, either 'px' or '%' within jQuery's css().

---

EDIT2:

css() apparently defaults to using pixels but if the OP is using percentages, then '%' would be required.

回答5:

This will horizontally center the red div, and it's width and height will dinamically change according to the browser windows size;

<div style="position:absolute;display:block;left:0;right:0;top:0;bottom:0;">
<div style="width:25%;height:25%;background:red;display:block;margin:auto;"></div>
</div>

Now the vertical centering is a bit more complex story...

回答6:

Try adding position:fixed to your CSS. This will mean that any positioning that you specify for the element will be in regards to the actual window instead of the document.

Not sure if this will fix it but it should.