How to center my a div in a table using CSS?

css, html, jquery, slideshow

Solution

Inline elements can be easily centered by using the css property "text-align:center;". Block elements should be align in the center by using "margin-left:auto;margin-right:auto;" and by giving them a fixed width. In your particular case I would suggest to use a span instead of a "div" or get rid of the div completely and use the text-align method.

Update

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Centering</title>
    <style type="text/css">
      table{
       border:1px solid black; 
      }
      span{
        background-color:red; 
        color:white;       
      } 
      td{
        text-align:center;
        width:200px; 
      }
    </style>
  </head>
  <body>
    <div class="item" id="item1">
      <table>
        <tr>
          <td>
            <span>Hi there!</span>  
          </td>
        </tr>        
      </table>
    </div>    
    </body>
</html>

Problem

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: ``` #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; } ``` Here is my JQuery function to change images: ``` 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 ); }); ``` And finally here is the slideshow div inside the table: ``` <td bgcolor="red" align="center" valign="top"> <div id="slideshow"> <img src="2009Slideshow\1.jpg" alt="Slideshow Image 1" class="active" /> <img src="2009Slideshow\2.jpg" alt="Slideshow Image 2" /> <img src="2009Slideshow\3.jpg" alt="Slideshow Image 3" /> etc... etc... </div> </td> ``` So why can't I get my slideshow to center inside of that column?

Original source