Align An Image In The Middle Of

I have the following code: The .css for the class='png' is: .p

Solution 1:

Set the table's text-align to center

Solution 2:

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

Solution 3:

sorry for not answering earlier, I have a solution: (I don't have enought time, later I'll improve my answer)

The absoluted images aren't in the same flow as the default inline images, but you still can use 'text-align:center'

Just do the opposite, instead of putting the display absolute to the class="png", give it position:relative... And now give position absolute to the img of the bottom:

<style type="text/css">    
.png {position:relative; z-index:10}
.bottom {position:absolute; z-index:0; left:0; top:0 }
</style>

<table>
<tr>
   <td style=" text-align:center">
     <img src="some_image_url.png" class="png" />
     <img src="another_image_url.jpg" class="bottom" />
   </td>
</tr>
</table>

This way you'll have an automatic centered image on the top of another. Don't forget that if you use position:absolute; you MUST set a top or bottom; or a left or right. In browsers like IE if you don't specify at least top with left, it will render in the IE way (broken).

(in my browser it is working I don't know why the fiddle doesn't show it the way I want, please test it and tell me if it is okay)

By the way, adding a div as you did is the best solution IMO.

Solution 4:

Set the float property of the image to

float: right;