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

I am trying to add a slideshow to one of my websites. The entire page is placed in an HTML table (which I hate obsession and I have not chosen). I want to center my slideshow inside that patticular column. Here's how my CSS looks:

  #slideshow {position: relative; } #slideshow IMG {status: complete; Z-index: 8; Opacity: 0.0; } #slideshow IMG.active {z-index: 10; Opacity: 1.0; } #slideshow IMG.last-active {z-index: 9; }  

My JQuery function for changing images:

  function slide switch () {var $ active = $ ('# slideshow IMG.active '); If ($ active. Length == 0) $ active = $ ('# slideshow IMG: last'); // images use it to activate the markup var $ next = $ in that sequence. Nxt () Length? $ Active.next (): $ ('# slideshow IMG: first'); $ Active.addClass ('Last Active'); $ Next.css ({opacity: 0.0}) .addClass ('active'). ({Opacity: 1.0}, 1000, Work () {$ active .removeClass ('active last-active');}); } $ (Function () {setInterval ("slideSwitch ()", 5000);});  

And finally there is a slideshow inside the table:

  & lt; Td bgcolor = "red" align = "center" valign = "top" & gt; & Lt; Div id = "slideshow" & gt; & Lt; Img src = "200 9 slideshow \ 1.jpg" alt = "slide show image 1" square = "active" /> & Lt; Img src = "200 9 slideshow \ 2.jpg" alt = "slideshow image 2" /> & Lt; Img src = "200 9 slideshow \ 3.jpg" alt = "slideshow image 3" /> Etc ... etc ... & lt; / Div & gt; & Lt; / TD & gt;  

Why can not I bring my slide show to the center inside that column?

Inline elements are easily centered using CSS property "text-align: center;" can go. "Margin-left: auto; margin-right: auto;" block elements Should be aligned to the center. And by giving them a certain width. In my special case I recommend using Span instead of a "div" or I can completely get rid of div and use the text-alignment method.

Update

  & lt ;? XML version = "1.0" encoding = "UTF-8"? & Gt; & Lt ;! DOCTYPE html PUBLIC "- // W3C / / DTD XHTML 1.1 / n" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> & Lt; Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" & gt; & Lt; Top & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" /> & Lt; Title & gt; Collected & lt; / Title & gt; & Lt; Style type = "text / css" & gt; Table {boundary: 1 px solid black; } Period {background color: red; White color; } Td {text-align: center; Width: 200px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "item" id = "item1" & gt; & Lt; Table & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; Span & gt; Hi there! & Lt; / Span & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;