Center image in table td in CSS

I've been trying to align an image to the center of the table td. It worked with setting margin-left to a specific value but it also increased the size of td too and that isn't exactly what I wanted

Is there any efficient ways of doing this? I used percentages for the height and witdh of the table.

9 Answers

<td align="center"> 

or via css, which is the preferred method any more...

<td> 

Simple way to do it for html5 in css:

td img{ display: block; margin-left: auto; margin-right: auto; } 

Worked for me perfectly.

Center a div inside td using margin, the trick is to make the div width the same as the image width.

<td> <div> <img src="me.jpg" alt="me" /> </div> </td> 

Set a fixed with of your image in your css and add an auto-margin/padding on the image to...

div.image img { width: 100px; margin: auto; } 

Or set the text-align to center...

td { text-align: center; } 

This fixed issues for me:

<style> .super-centered { position:absolute; width:100%; height:100%; text-align:center; vertical-align:middle; z-index: 9999; } </style> <table><tr><td align="center" valign="middle" > <img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif"> </td></tr></table> 

<table> <tbody ><tr><td align="center"> <img src="axe.JPG" /> </td> </tr> </tbody> </table> 

or

td { text-align:center; } 

in the CSS file

td image { display: block; margin-left: auto; margin-right: auto; } 

Another option is the use <th> instead of <td>. <th> defaults to center; <td> defaults to left.

As per my analysis and search on the internet also, I could not found a way to centre the image vertically centred using <div> it was possible only using <table> because table provides the following property:

valign="middle"