Hi,
This is not exactly what you want but probably the simplest way is to float the images like so:
Code:
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.outer {
background-color: #CCCCCC;
width: 700px;
}
.imageholder {
width:280px;/*make this bigger than the width of your largest image if possible*/
float:left;
margin:25px;
}
.imageholder img {float:left}
.imageholder p {float:left;margin-top:0px;}
-->
</style>
</head>
<body>
<div class="outer">
<div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="146" height="50" />
<p>Image </br >
Name </p>
</div>
<div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="166" height="150" />
<p>Image Name</p>
</div>
<br style="clear:both" />
<!-- place this after every set of images -->
<div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="116" height="95" />
<p>Image Name</p>
</div>
<div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="106" height="30" />
<p>Image Name</p>
</div>
<br style="clear:both" />
<div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="136" height="85" />
<p>Image Name</p>
</div>
<div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="146" height="50" />
<p>Image Name</p>
</div>
<br style="clear:both" />
<div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="126" height="95" />
<p>Image Name</p>
</div>
<div class="imageholder"> <img alt="" src="images/pmoblogo4.jpg" width="126" height="95" />
<p>Image Name</p>
</div>
<br style="clear:both" />
</div>
</body>
</html>
However if you want the images vertically aligned within each row then the only way of doing so would be to find the height of each image and then set top to 50% and a negative margin of half the image height to draw it vertically central. The image would need to be absolutely placed for this to display correctly.
It seems a lot of work for such a small advantage that if it were up to me I'd leave them top aligned as in the example.
Hope it helps anyway.
Paul
Thank you
Bookmarks