homepage Welcome to WebmasterWorld Guest from 54.166.148.189
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Align image to bottom of div & horizontally centered
alphaniner




msg:4164040
 6:33 pm on Jul 3, 2010 (gmt 0)

I've looked at the top results from this domain, but I didn't find the solution I'm looking for. Basically, I'm trying to make a thumbnail gallery with thumbs of different sizes. The thumbs are pre-generated to fit in the div without stretching (ie, I don't use the height and width properties as in the following code). Now I want to get the images to align to the bottom of the div (green box) while remaining horizontally centered. The method shown here [webmasterworld.com] gets the images to the bottom but as far as I can tell makes it impossible to keep them centered. Thanks in advance.

<html>

<head>
<title> title </title>
<style type="text/css">
body
{
background-color:black;
color:white;
}
a:link
{
text-decoration:none;
color:orange;
}
a:visited
{
text-decoration:none;
color:orange;
}
a:hover
{
text-decoration:none;
color:orange;
}
a:active
{
text-decoration:none;
color:orange;
}
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.inimg
{
height:310px;
width:255px;
float:left;
background-color:Green;
}
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>

 

LouiseMarie




msg:4165248
 4:01 pm on Jul 6, 2010 (gmt 0)

Hi,

I noticed that you have a float left property on the inimg green div that you've got your images in. Which div is it that you need to have the images centered within? inimg or img?

If it's inside div class="img" then you could add another div inside that one with margin properties to center it such as:

<div class="img"><div style="margin:0 auto 0 auto;"><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>

The margin:0 auto 0 auto gives you left and right auto margins that if inside a div that has a width set will center.

hope this helps

alphaniner




msg:4165789
 2:03 pm on Jul 7, 2010 (gmt 0)

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.

LouiseMarie




msg:4167161
 1:02 pm on Jul 9, 2010 (gmt 0)

I've had a look at your code and tried so many different style setting but I can't get it to move to the bottom :(

Normally setting a div to "display:table-cell;" would make the "vertical-align:bottom;" property work but alas no luck so i'm afraid that I can't help give you a different solution to the margin-top fix.

Sorry I can't help more :(

You should change the properties on your images to css such as:
style="height:300px; width:245px;" instead of height="300"

and you should always specify how much of what like 'px, %, em' etc....

Although changing this made no difference to your problem just thought i'd mention it.

alphaniner




msg:4167250
 4:17 pm on Jul 9, 2010 (gmt 0)

Oh well :/

Thank you for trying though.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved