bigsilk Posted July 31, 2009 Share Posted July 31, 2009 I'm trying to vertically center images in a div so the center of the images line up horizontally. Right now all of the bottoms are lined up:click hereThanks,Adam Link to comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2009 Share Posted July 31, 2009 da je vu? from php? glitch in the matrix.again, i've just put this together, which sorts out the resize and positioning issue<!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=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function resizeme(){imgtotal = document.images.length;for(i=0;i<imgtotal;i++){currentHeight = document.images.width;currentWidth = document.images.width;newHeight = (currentHeight/100)*50;newWidth = (currentWidth/100)*50;document.images.style.width=parseInt(newWidth)+"px";document.images.style.height=parseInt(newHeight)+"px";document.images.style.marginTop="-"+((parseInt(newHeight))/2)+"px";}}window.onload=resizeme;/*--*//*]]>*/</script> <style type="text/css">.wall img{ border: 1px solid #00ff00; top: 50%; position: relative; padding: 0 10px;}.wall a {display: block; float:left; height: 100%; border: 1px dashed #0000ff; }</style></head><body><div class="wall" style="border: 1px dashed red; background-color:#FF9933; height: 100px; overflow:hidden;"><a href="#"><img src="one.png" /></a><a href="#"><img src="two.png" /></a><a href="#"><img src="three.png" /></a><a href="#"><img src="four.jpg" /></a></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted July 31, 2009 Share Posted July 31, 2009 The CSS vertical-align property is specifically for that.Supposing your images are in a box called #gallery, this code would do it for you: #gallery img { vertical-align: middle; } Edit: Which would work, but you'll have to Give the #wall element a fixed height (cannot be in %), and make its line-height property equal to it. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 4, 2009 Share Posted August 4, 2009 try 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=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <?phpfunction imageResize($target) {$myimage = getimagesize($target);$percentageValue = 50;$width = $myimage[0]; $height = $myimage[1];//gets the new value and applies the percentage, then rounds the value$width = round(($width / 100)* $percentageValue);$height = round(($height / 100)* $percentageValue);//returns the new sizes in html image tag format...this is so you can plug this function inside an image tag and just get return "src=\"$target\" width=\"$width\" height=\"$height\"";}?><style type="text/css">.pattern1 { overflow:hidden;}.pattern1 a{padding: 0 10px; height: 150px; line-height: 150px; text-decoration:none; }.pattern1 img { vertical-align:middle;}</style></head><body><!--using a standard html image tag, where you would have the width and height, insert your new imageResize() function with image file name--> <div class="pattern1"><a href="#"><img <?php echo imageResize("klematis3_big.jpg"); ?> /></a><a href="#"><img <?php echo imageResize("klematis4_big.jpg"); ?> /></a><a href="#"><img <?php echo imageResize("1cha_imgash_thumb.gif"); ?> /></a><a href="#"><img <?php echo imageResize("1cha_imgbrett_thumb.gif"); ?> /></a><a href="#"><img <?php echo imageResize("1cha_imgdallas_thumb.gif"); ?> /></a><a href="#"><img <?php echo imageResize("klematis4_big.jpg"); ?> /></a></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.