Place image in the middle of a td

Question

I have a table with a fixed width with a single < tr > and 1 < td >. The < td > contains an < img > but that image changes from time to time as does the width of the image. How can I place the image on the center of the < td >?

I tried to align the < td >, but that didn't work. I tried to align the < img >, but that didn't work either.

I tried to add 2 < td >, one on each side of the < td >< img > and tried to use css to adjust the width of the 2 empty < td > to 100% and the < td >< img > to auto. That didn't work.

I have to say that this it the first time I use CSS.

HTML

< table id="table_image" >
     < tr >
        < td id="left" >&nbsp;< /td >
        < td id="button" >< img src="image.jpg" >< /td >
        < td id="right" >&nbsp;< /td >
     < /tr >
< /table >

CSS

< style type="text/css" >

    #table_image {
        border:0px;
        width:1034px;
        height:auto;
    }
    #left {
        width:100%;
        float:left;
    }
    #center {
        border:0px;
        alignment-baseline:middle
    }
    #right {
        width:100%;
        float:right;
    }
< /style >

Please help!

Answer 1

Here is how to put the image in the middle of the <td> : http://jsfiddle.net/zLS8J/6/ I modified the table and css so you could clearly see the borders. The main part you should be concerned with is the css for text-align:center;

Answer 2

Have you tried using the HTML center tag ? http://www.w3schools.com/tags/tag_center.asp