Centering is not the primary problem. Getting the image bottom aligned is. I only mentioned centering because the one method I found for getting the images bottom aligned broke centering:
<html>
<head>
<title> title </title>
<style type="text/css">
body
{
background-color:black;
color:white;
}
div.img
{
margin:7px;
height:400px;
width:255px;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px
max-width:245px;
border:none;
position:absolute;
right:0;
bottom:0;
}
div.inimg
{
height:310px;
width:255px;
float:left;
background-color:Green;
position:relative;
}
div.desc
{
text-align:center;
font-weight:normal;
width:auto;
margin:2px;
background-color:#1A1A4C;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<div class="img"><div class ="inimg"><img src="http://www.prlog.org/10020847-example-consulting-group.jpg" height="165" width="245" /></div><div class="desc">Title</div></div>
<div class="img"><div class ="inimg"><img src="http://www.prlog.org/10020847-example-consulting-group.jpg" height="300" width="245" /></div><div class="desc">Title</div></div>
<div class="img"><div class ="inimg"><img src="http://www.prlog.org/10020847-example-consulting-group.jpg" height="300" width="100" /></div><div class="desc">Title</div></div>
</body>
</html> Maybe some images would help.
Here is what I have:
[
i969.photobucket.com ]
Here is what I want:
[
i969.photobucket.com ]
The only way I've found to implement the latter is to calculate and add a top margin to each individual image, equal to the difference between the height of a particular image and the max image height, 300px. The following more closely represents my current page:
<html>
<head>
<title> title </title>
<style type="text/css">
body
{
background-color:black;
color:white;
}
div.img
{
margin:7px;
height:400px;
width:255px;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
max-width:245px;
border:none;
}
div.desc
{
text-align:center;
font-weight:normal;
width:245px;
margin-left:5px;
margin-right:5px;
height:80px;
background-color:#1A1A4C;
}
</style>
</head>
<body>
<div class="img"><img style="margin-top:140" src="http://www.prlog.org/10020847-example-consulting-group.jpg" height="160" width="245" /><div class="desc">Title</div></div>
<div class="img"><img src="http://www.prlog.org/10020847-example-consulting-group.jpg" height="300" width="245" /><div class="desc">Title</div></div>
<div class="img"><img src="http://www.prlog.org/10020847-example-consulting-group.jpg" height="300" width="100" /><div class="desc">Title</div></div>
<div class="img"><img style="margin-top:100" src="http://www.prlog.org/10020847-example-consulting-group.jpg" height="200" width="145" /><div class="desc">Title</div></div>
</body>
</html> The page is actually built from a script, so the extra steps are not an inconvenience despite having dozens images. It is, however, a magnificently poor way of implementing something which - it seems to me - should be 'accomplishable' by at most a few entries in the style sheet.
