Problem centering Javascript slideshow

The title says it all really. I currently have jQuery based slideshow on my page that cycles through a number of images, the variables of which it gets from my database.

These pictures vary in size and I am trying to get them to center within the containing div when they fade in.

I am using the current CSS

#slideshow_container {
float: left;
height: 492px;
width: 700px;
margin: 0 auto;
position: relative;
text-align: center;
z-index: -2;
background-color: red;
}

.slideshow {
z-index: -1;
position: relative;
text-align: left;
margin: 0 auto;
}

.slideshow img {
padding: 0;
border: 0;
margin: 0;
}

This is my HTML markup

<div id="slideshow_container">
<div class="slideshow">
<?php include("slideshow.php"); ?>
</div> <!--Closing div for slideshow-->
</div> <!--Closing div for slideshow_container-->

and this is the code from the included slideshow.php

<?php

//**Connect to Database
$link=mysql_connect('localhost','grah2005_shannon','h42231sqldb');
mysql_select_db('grah2005_shannon');

//**EDIT TO YOUR TABLE NAME, ECT.

$getitem = mysql_query("SELECT picture_id, picture_name, picture_link FROM slideshow ORDER BY picture_id DESC")
or die(mysql_error());
while ($rows = mysql_fetch_array($getitem)) {
extract($rows);
$rows['n_sets_per_page'] = 2;

echo "<img src='$picture_link' />";
}

//**close the db link
mysql_close($link);

?>

The problem I have is that the first image to load centers correctly within the slideshow container div. But then each subsequent picture to load maintains the left margin of the first picture, no matter what it's dimensions.

What I need is for the div to re-center everytime a new picture fades in. The problem can be seen at http://bit.ly/cYYjtR (you need to refresh when the page loads to see the effect properly)

Any suggestions would hugely appreciated. As always, thanks in advance,