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