Question

I have a script that loads in a div with images running jQuery Cycle Lite Plugin.

I got the tip that I could us the “after” function in that plugin to make changes to the picture each time the image is refreshed. So I wrote this:

$("#display div").css({  
  margin: "0 auto",  
  "text-align": "center",  
});

The html built like this:

<div id="display">
  <div id="slideshow1">
     <img ... />  
  </div> 
</div>

This isn’t working, whats wrong?
( this is supposed to center it horizontally, i need to center it vertically to )..

edit:
I kind of got it working but it still needs help, anyone that knows why its acting weird?
http://hem.bredband.net/noor/bildspelet.html

thanks @pekka for the link

Answer 1

First of all, trailing commas in JavaScript objects is bad stuff, remove the last comma.

Second of all you could probably calculate it like so:

var $div = $('#display');
$div.css('position', 'relative');

var $kids = $div.children(); 
// I'm assuming you want to center all the slideshows?
$kids.each(function() {
  var $this = $(this);
  $this.css({
    left: ($div.innerWidth(true) - $this.width()) / 2,
    top: ($div.innerHeight(true) - $this.height()) / 2,
    position: 'absolute'
  });
}); 

From looking at your sample: your <div id="display"> needs to have a height set (even 100%) in the css, or it will always shrink to contain (which when all children are made absolute positioning, the height will fold to zero). Please take a look at the jsbin example