Center jQuery Cycle slideshow and text

JavaScript
1

Hi all

I have a slideshow using the jquery cycles plugin.

http://www.ttmt.org.uk/forum/cyclecenter/

The images used have different widths and have titles.

I need to have the slideshow and title centered.

The images are in div’s which also contain the <p> elements.

I’ve done it like this because I’m doing it in Wordpress and this is how it’s structured there.


<div id="slideshow">
  <div><img  src="01.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
  <div><img  src="02.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
  <div><img  src="03.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
  <div><img  src="04.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
  <div><img  src="05.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
  <div><img  src="06.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
</div>

I had the images centered before using this jquery code

http://www.ttmt.org.uk/forum/cycle/


<script type="text/javascript">
  $(window).load(function() {
    $('#slideshow div').each(function(){
      $(this).css({marginLeft: -$(this).width()/2})
    });
    $('#slideshow').cycle({
      fx: 'fade',
      speed: 800,
      timeout: 3000,
      pause:     1,
      next: '#next',
      prev: '#prev',
    });
  });

</script>


//


#slideshow{
  margin:0 auto
}
#slideshow img{
  left:50%!important;
  background:white
}

but this used this html


<div id="slideshow">
  <img  src="01.jpg" alt="" />
  <img  src="02.jpg" alt="" />
  <img  src="03.jpg" alt="" />
  <img  src="04.jpg" alt="" />
  <img  src="05.jpg" alt="" />
  <img  src="06.jpg" alt="" />
</div>

How can I now center the slideshow and title ?


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>


  <style type="text/css" media="screen">
    *{
      margin:0;
      padding:0;
    }
    /*
    #slideshow{
      margin:0 auto
    }
    #slideshow img{
      left:50%!important;
      background:white
    }
    */
    #slideshow{
      margin:0 auto;
    }
    #slideshow div{
      border: 1px solid green;
      background:white;
      left:50%!important;
    }
    #slideshow p{
      border: 1px solid red;
      text-align:center;
    }

  </style>


</head>

<body>

  <div id="slideshow">
    <div><img  src="01.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
    <div><img  src="02.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
    <div><img  src="03.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
    <div><img  src="04.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
    <div><img  src="05.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
    <div><img  src="06.jpg" alt="" /><p class="wp-caption-text">Image title</p></div>
  </div>

  <script type="text/javascript">
    $(window).load(function() {
      $('#slideshow div').each(function(){
        $(this).css({marginLeft: -$(this).width()/2})
      });
      $('#slideshow').cycle({
        fx: 'fade',
        speed: 800,
        timeout: 3000,
        pause:     1,
        next: '#next',
        prev: '#prev',
      });
    });

  </script>

</body>

</html>