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:

PHP 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?na...y&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

PHP Code:


			
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>"