...

View Full Version : Vertical Align headache



allenk
07-14-2007, 05:40 PM
Hi there, I've tried and tried and tried again, I I have been googling and reading, and still can't find a solution.

Here is the code:

."<td align='center' style='width: 180px; height: 180px; vertical-align: middle;'>
<a href=\"{$row['img']}\" target=\"_blank\">
<div style=\"position: relative; top: 0px; left: 0px; width: 180px; height: 180px; vertical-align: middle; background-color: #000000;\">
<div style=\"position: absolute; top: 50%; margin-top: -90px; width: 180px; height: 180px; z-index: 1; background-color: #000000;\">
<img style=\"vertical-align: middle;\" src=\"{$row['img']}\" $imgw border=\"0\"></img>
</div>
<div style=\"position: absolute; top: 0px; left: 0px; vertical-align: middle; z-index: 2;\">
<img src=\"http://www.dmfsniperz.com/modules/ImageGallery/images/overlay.png\" width=\"180\" height=\"180\" border=\"0\"></img>
</div>
</div></a></td>"

{$row['img']} = the display picture i'm showing.

Direct link: http://dmfsniperz.com/modules.php?name=ImageGallery&file=Members

What I'm trying to do is vertically align the shorter images within that 180x180 area.

You will probably notice several attempts to get it vertically aligned, but all have failed.

allenk
07-14-2007, 06:10 PM
Well, I guess the key to this is just take it slow.

heres the fix


echo "<table width='70%' height='180' cellpadding='0' cellspacing='0' align='center'>"
."<tr>"
."<td align='center' style='width: 180px; height: 180px;' valign='middle'>"
."<a href=\"{$row['img']}\" target=\"_blank\">"
."<div style=\"position: relative; width: 180px; height: 180px; top: 0; left: 0;\">"
."<div style=\"z-index: 1; position: relative; top: 0; left: 0; width: 180px; height: 180px; display: table-cell; vertical-align: middle; background-color: #000000;\"><img src=\"{$row['img']}\" $imgw border=\"0\"></img></div>"
."<div style=\"z-index: 2; position: absolute; top: 0; left: 0; width: 180px; height: 180px;\"><img src=\"http://www.dmfsniperz.com/modules/ImageGallery/images/overlay.png\" width=\"180\" height=\"180\" border=\"0\"></img></div>"
."</div></a></td>"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum