Question

So, this is a problem that’s been asked before, but I’m hoping we can lay it to rest: I’m using jQuery 1.4. If I define the style

#obj { margin: 0 auto; }

and then do

$('#obj').css('marginLeft');

the result is the computed value in pixels. Is there any way to tell whether those pixels come from the auto calculation or not, without parsing document.styleSheets?

Answer 1

This solution would also be triggered if the margins were set to percentages, but it might be good enough for your purposes. Basically, you record which margins change on resize. So you’d record the margins before resize to an array:

var aMargins = [];
$('.yourObjs').each(function(i,obj){
  var objML = $(obj).css('marginLeft');
  aMargins.push(objML);
});

Then resize the window, see which margins changed (these will be either ‘auto’ or %), do what you need to do to them and return he window to original size:

var wW = $(window).width();
var wH = $(window).height();  
window.resizeTo(wW - 5, wH);
$('.yourObjs').each(function(i,obj){
  if ($(obj).css('marginLeft') != aMargins[i]) {
    // your centering code here
  }
}
window.resizeTo(wW,wH);

If your centering code just adjusts the left margin then this should work fine for % based margins too. I can’t test this code or provide an example because I’m on the road and writing from my phone, but hopefully this works or helps you come up with something that will.