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.
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:
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.
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.