Search code examples
htmlimagecsshtml-tablecentering

Centering an image link inside of a <td> tag

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;
}
Solution

  • 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.