I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be horizonally and vertically centered within a <TD> </TD> area. No matter what I do the two image just present one above the other, albeit centered, NOT on top of each other.
I originally did the entire page layout in TABLES until I found out I.E. 7 did not handle the image alignment correctly and I have already rewritten much of the page to get my three <td> areas within my main table to be spaced and centered correctly. Since I have now used <div> tags in many places to correct for formating issues with the nested tables I had, I now have basically two vertical menu bars flanking my imaging space in the center; all this is defined by a table and centered in the viewport. I have tried moving the <DIV> outside the <TD> tags, I have tried no <TD> tags which throws the whole page out of wack, I have tried to put the style attribute in the <TD> declaration and a dozen other things. What the heck is going on with this centering?
See my sample code:
- <Table>
-
<TR>
-
<TD style="width:75px;height:400px">
-
Some stuff.
-
</TD>
-
<TD style="width:75px;height:400px">
-
<div style="width:400px;height:400px; text-align:center; vertical-align:middle;">
-
<img style="z-index:1;" src="photo1.jpg">
-
<img style="z-index:2;" src="photo2.jpg">
-
</div>
-
</TD>
-
<TD style="width:75px;height:400px">
-
Some stuff.
-
</TD>
-
</TR>
-
</Table>