[RESOLVED] Dynamicly centering an image in a block

[aarchaic]

Hey guys i may be posting this in the wrong forum but its php related but i guess more css.

i have thumbnails that i need to center vertically. i manage to get centered in a way but then i ran into a bug since the photos i was using had a 3:2 ratio and once i loaded a 4:3 ratio photo it was not centered anymore

the original code looked like this:

list($width, $height) = getimagesize($imagename) ;

						if ( $width > $height ) {	  
								$top=round(((80-$height)/2),0);
							  echo ("<div id='emailphoto'><a href='profile.php?UID=$finfo[userid]&UN=$finfo[username]'><img class='landscape' src='$imagename'/></a></div>");
							  } else { echo ("<div id='emailphoto'><a href='profile.php?UID=$finfo[userid]&UN=$finfo[username]'><img class='portrait' src='$imagename'/></a></div>"); } 

the style elements looked like this in the style sheet.

#emailphoto img{
	display:block;
	margin-left:auto;
	margin-right:auto;
	}	

#emailphoto img.landscape {
	margin-top:12px;
        width:80px;
	}

#emailphoto img.portrait {
	margin-top:0px;
        height:80px;
	}

is there anyway i can make the margin-top in the style sheet change dynamicly using the $top value?

i've tried including the style in the <img> tag but havent had any success?

[aarchaic]

OK i started on one of my other pages now with a clean set of code and css styling this time its working!!

for those interested this is what i've done.

this is my CSS elements

#resultitem {
	width:299px;
	margin:2px;
	height:84px;
	float:left;
	display:block;
	background:#FF0000;
	}

#resultitem #thumb {
	display:block;
	height:80px;
	width:80px;
	margin:2px;
	float:left;
	background:#00CC33;
	}

#resultitem a img.fade{
	opacity: 0.75;
  	-webkit-transition: opacity 1s linear;
	filter: alpha(opacity = 75);

}

#resultitem a img:hover, #resultitem a img:hover{
	opacity: 1;
	filter: alpha(opacity = 100);
	background-color: green;

}

#resultitem a img{
	border-bottom-style: none;
	border-bottom-width: 0px;
	border-top-style: none;
	border-top-width: 0px;
	border-left-style: none;
	border-left-width: 0px;
	border-right-style: none;
	border-right-width: 0px;
	}

#resultitem #info {
	display:block;
	height:80px;
	width:211px;
	margin:2px;
	float:left;
	background:#55CC33;
	}

and here follows the html and php code:

<div id="resultitem">
      	<div id="thumb">
		<?php 
			$image="gfx/profilephotos/thumb_Aarchaic_556bb6615f2eb01f3413d0e8bf724e36.jpg";
			list($width, $height) = getimagesize($image) ;
			if ( $width > $height ) {	  

									$top=round(((80-$height)/2),0);
									$image="<a href='index.php'><img class='fade' style='margin-top:".$top."px;' src='$image' width='80' /></a>";
									} else { $image="<a href='index.php'><img class='fade' style='display:block; margin-left:auto; margin-right:auto;' src='$image' height='80' /></a>"; }
									echo $image;

	?>	 </div>
    <div id="info"> </div>
  </div>