How to Vertically Align a DIV

[GoDawgs]

EDIT: I added an example of what appears in HTML, because the PHP code is very hard to read

Okay before you guys tear me a new one and tell me to Google this. I've searched everywhere for this and have been trying to implement the solution using top:50% and margin-top:image_size/2.

For some reason nothing will work. I am looking for help more specific to my code and, yes, I have looked at several pages on Google to no avail. I have since deleted the code that was being used to try and vertically align the div, because it was really convoluting things.

Any ideas?

Here's my PHP portion I'm having trouble with:


include('SimpleImage.php');
while($result_array = mysql_fetch_array($result)){
$image = new SimpleImage();
$image->load($result_array['img']);
$height = $image->getHeight();
$move_right = $count_runs % 5;
$height_from_top = (int)($count_runs / 5);
$the_price = (float)($result_array['the_price']/100);

$display_block .= "
<div id=\"container".$result_array['id']."\" class=\"view_container\" style=\"left:".($move_right*167+17)."px; top: ".($height_from_top*227+17)."px;\">
<div id=\"content".$result_array['id']."\" class=\"view_content\">
".substr($result_array['name'],0,45)."<br>
<div id=\"view_img".$result_array['id']."\" class=\"view_img\">
<center><img src=\"".$result_array['img']."\" border=\"0\" name=\"img".$result_array['id']."\" class=\"prod_img\"></center>
</div>
<div id=\"button".$result_array['id']."\" class=\"view_button\">
<a href=\"buynow.php\" id=\"buynow\">BUY NOW: $".$the_price."</a><br>
";

if(!isset($_COOKIE['user'])){
$display_block .= "<a href=\"index.php?page=Login\"><img src=\"main_page/view_button_mainscreen.png\" name=\"button".$result_array['id']."\" border=\"0\" onMouseOver = \"window.document.button".$result_array['id'].".src = 'main_page/Login_button_mainscreen.png'\" onMouseOut = \"window.document.button".$result_array['id'].".src = 'main_page/view_button_mainscreen.png'\"></a>";
}else{
$display_block .= "<a href=\"view.php\"><img src=\"main_page/view_button_mainscreen.png\" name=\"button".$result_array['id']."\" border=\"0\"></a>";
}
$display_block .= "
</div>
</div>
</div>
";

if($count_runs % 4){
$display_block .= "<br>";
}
$count_runs++;
}



.view_container{
position:absolute;
width: 150px;
height: 210px;
background-image: url(main_page/viewbox.png);
text-align: center;
}

.view_button{
position:absolute;
top: 143px;
left: 0px;
width: 135px;
height: 65px;
padding: 3px 3px 3px 0px;
}

.view_content{
position:absolute;
text-align: center;
vertical-align: middle;
top: -5px;
left: 4px;
width:135px;
height:210px;
margin: 10px 100px 10px 3px;
}

.view_img{
position:absolute;
width:130px;
height:100px;
top:35px;
left:0px;
vertical-align:middle;
}

.prod_img{
vertical-align:middle;
}



<div id="container12" class="view_container" style="left:351px; top: 17px;">

<div id="content12" class="view_content">

HP - Pavilion Special Edition Desktop<br>

<div id="view_img12" class="view_img">

<center><img src="product_images/HP_pavilion_special_edition.jpg" border="0" name="img12" class="prod_img"></center>

</div>

<div id="viewing12" class="viewing"><a href="buynow.php" id="buynow">BUY NOW: $549.99</a><br><a href="#" onClick="view('12');"><img src="main_page/view_button_mainscreen.png" name="button12" border="0"></a>

</div>

</div>

</div>