Jump to content

How To Vertically Center Images In A Div...


bigsilk
 Share

Recommended Posts

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>

Edited by dsonesuk
Link to comment
Share on other sites

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.

Edited by Ingolme
Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...