Search code examples
htmlcsspngalignment

Align an image in the middle of <td></td>

I have the following code:

<td>
<img src="some_image_url.png" class="png" />
<img src="another_image_url.jpg" />
</td>

The .css for the class="png" is:

.png {
    position:absolute;
}

How can I make the Sold Out image to be shown in the middle, as the other image is aligned?

Thanks.

EDIT: Here's the .css for the td:

.something td {
    padding: 7px;
    width: 20%;
    text-align: center;
    vertical-align: top;
}
Solution

  • try it like this:

    td
{
  position: relative; /* if it's IE */
  /* position: fixed;  if it's mozila */
}
    .png , .jpg
    {
        position:absolute;
        left:50%;
        top:50%;
    }
    .png
        {
            margin-top: <put here half of the height of png>
            margin-left: <put here half of the width of png>
        }

    add a class jpg to the jpg image

    UPDATE: I edited it again, this works for me ...
    make sure that your td is big enough