html - 将 <td> 标签内的图像链接居中

Question

我查看了 W3Schools 和这里的几个线程，无论我做什么，这些图像链接都不会在它们的元素内居中。我不能只缩小尺寸，因为表格中下方的一些图像几乎无法容纳在它们的单元格中。我想水平居中，垂直居中图像和我所看到的任何地方，下面是它是如何做到的(好吧。水平。我想一旦我弄清楚了我就会解决垂直居中问题。)

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

出于某种原因，这在我的 html/css 中不起作用。这是我试图居中的链接之一，以及引用它的 css 代码。

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

这是一个 jsfiddle，它与旧样式文本对齐一起使用:中心；技术，在 photodisplaytd 上:http://jsfiddle.net/C6Zux/2/

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

我也尝试按照@cincodenada 的建议来做，但可能犯了一些错误并且到目前为止失败了 - 该声明现在在 css 中被注释掉了。