Centering an image link inside of a <td> tag

Question

I've looked at W3Schools and several threads here, and no matter what I do, these image links will not center inside of their elements. I can't just make the smaller, because some of the images further down in the table just barely fit in the their cells. I would like to both center horizontally, and vertically the images and everywhere I look, the following is how it is said to do it (Well. The horizontal. I figured I'd tackle the vertical centering once I got this straightened out.)

margin-left:auto;
margin-right:auto;
width: (some pixellage amount)

For some reason, this is not working in my html/css. Here is one of the links I'm trying to center, and the css codes referencing it.

HTML

<table class = "displayTable"><tr>
<td class = "photodisplaytd chana">
<a href="chanasImages/Originals/animeApronOriginal.jpg"><img src="chanasImages/animeApron.jpg" onmouseover="this.src='chanasImages/animeApronBack.jpg'" onmouseout="this.src='chanasImages/animeApron.jpg'" alt = "Anime styled white apron, front with back image on mouse rollover."/></a>
</td>

CSS

.chana
{
margin-left: auto;
margin-right:auto;
width:50px;
}

.displayTable
{
alignment: right;
margin-left:auto;
margin-right:auto;
}


.photodisplaytd
{
border:4px solid slategrey;
background-color:#FFFFFF;
}

Answer 1

Here's a jsfiddle where it works with the old style text-align: centre; tech, on the photodisplaytd: http://jsfiddle.net/C6Zux/2/

.photodisplaytd
{
    border:4px solid slategrey;
    background-color:#FFFFFF;
    text-align: center;
}

I also tried to do it with @cincodenada's suggestion but probably made some mistake and failed so far - that declaration is commented out in the css there now.

Answer 2

You have the auto margins on everything except where you need them. margin:auto gives the targeted object automatic margins to center it in its parent.

As a result, you need to apply margin:auto to your links themselves (.chana a, for instance), not to the table cell or table. It's not a property of the table cell (like the old align attributes would be), but of the thing being centered.

Additionally, since a elements are inline elements by default, you have to make them block elements in order to have auto margins. You can do this by adding a display: block to the styles as well.

I put together a quick demo fiddle showing everything working as expected.