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!

@BuddhistBeast In HTML5 [end slashes are no longer needed](http://stackoverflow.com/q/7366344/1256925). His `` tag is correct. — Joeytje50, Dec 28 '13 at 23:56
I'm new to stack overflow, but what happens when the person obviously marks the wrong one as an answer? — gfrobenius, Jan 01 '14 at 19:35

score 6 · Accepted Answer · answered Dec 28 '13 at 23:52

6

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;

answered Dec 28 '13 at 23:52

gfrobenius

3,689
6
29
60

1

Here is that demo using the excellent "Place Cage": http://jsfiddle.net/sperske/zLS8J/7/ – Jason Sperske Dec 29 '13 at 01:14

score 0 · Answer 2 · answered Dec 28 '13 at 23:33

0

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

answered Dec 28 '13 at 23:33

Sid

11
2

4

Please do not recommend anyone W3Schools. – Ali Gajani Dec 28 '13 at 23:34
3

Or the `` tag: http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html – Jason Sperske Dec 28 '13 at 23:35
4

Don't use , use CSS instead. Its not supported in HTML5 and was deprecated in HTML 4.01. – gfrobenius Dec 28 '13 at 23:55

Place image in the middle of a td

2 Answers2