PDA

View Full Version : centre thumbnail in div


bee80
09-03-2009, 09:03 AM
hi, what im looking to do is , i have a dynamic thumbnail gallery, in my upload script the thumbs are resized to 80px wide keeping the ratio, so anywhere from 80px to 120px in height, these thumbs are dynamically echo'd into display divs of 80px by 120px and the thumbs align at the top, is there anyway i get can get the centre of each image to align with the centre of the div. Help please

bee80
09-03-2009, 09:06 AM
i can get the height and size of each thumb with this code if it would help :

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

edbr
09-03-2009, 09:33 AM
you need to style the div that you are echoing (as a class). use margins.
whats the div you have at present?

bee80
09-03-2009, 09:41 AM
im echoing a display div of 140px by 80px, inside that is a thumb div 120 by 80, and under that is a thumb_link div of 80 by 20, so thumb div and thumb_link div both sit inside display div, so im looking to centre the thumb inside thumb div, but if u say use margins how can i when the height of each thumb could be different?

edbr
09-03-2009, 09:48 AM
maybe something like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

.show{ width:80px; height:120px;
border: solid 1px #666; vertical-align:middle; }
.vert{ padding-top:50%; padding-bottom: 50%; position:relative; float:left;}
</style>
</head>

<body>
<div class="show"><span class="vert"><img src="" width="80" height="80" alt="" /></span></div>
</body>
</html>

bee80
09-03-2009, 10:16 AM
thanks this sort of works, changed padding into pixels as was not displaying correctly, also distorts thumbs, but looks more uniform, thanks again ed

edbr
09-04-2009, 01:36 AM
did you change it to get the widths and heights dynamically? width = $width height = $height
i cant see why they would distort