title: How to center my a div in a table using CSS?
body: <p>I'm trying to add a slideshow to one of my websites. The whole page is layed out in an HTML table (which I hate with a passion AND did not choose). I want to center my slideshow inside that paticular column. Here is what my CSS looks like:</p>
  
  <pre><code>#slideshow {
  position:relative;
  }
  
  #slideshow IMG {
  position:absolute;
  z-index:8;
  opacity:0.0;
  }
  
  #slideshow IMG.active {
  z-index:10;
  opacity:1.0;
  }
  
  #slideshow IMG.last-active {
  z-index:9;
  }
  </code></pre>
  
  <p>Here is my JQuery function to change images:</p>
  
  <pre><code>function slideSwitch() {
  var $active = $('#slideshow IMG.active');
  
  if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  
  // use this to pull the images in the order they appear in the markup
  var $next =  $active.next().length ? $active.next()
      : $('#slideshow IMG:first');
  
  $active.addClass('last-active');
  
  $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
          $active.removeClass('active last-active');
      });
  }
  
  $(function() {
      setInterval( "slideSwitch()", 5000 );
  });
  </code></pre>
  
  <p>And finally here is the slideshow div inside the table:</p>
  
  <pre><code>&lt;td bgcolor="red" align="center" valign="top"&gt; 
  &lt;div id="slideshow"&gt;
      &lt;img src="2009Slideshow\1.jpg" alt="Slideshow Image 1" class="active" /&gt;
      &lt;img src="2009Slideshow\2.jpg" alt="Slideshow Image 2" /&gt;
      &lt;img src="2009Slideshow\3.jpg" alt="Slideshow Image 3" /&gt;
      etc...
      etc...
  &lt;/div&gt;                    
  &lt;/td&gt; 
  </code></pre>
  
  <p>So why can't I get my slideshow to center inside of that column?</p>