Web Design Forum: Vertical alignment within a div? - Web Design Forum

Jump to content

View New Content

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Vertical alignment within a div?

#1 C A R

Forum Newcomer

Group: Members
Posts: 89
Joined: 26-February 10
Reputation: 2

Posted 18 January 2012 - 10:32 AM

Hi all,

I have a number of products in which each product box contains the image of the product. The height of the images vary, and so I'd really like to center align the images vertically in the box, so that there is an even amount of whitespace above and below the smaller images within their respective product boxes.

However this doesn't seem to be easy to achieve.I thought using the vertical-align CSS attribute on the container would do the trick, but this attribute appears to be pretty useless.

Anyone got any suggestions on an efficient/reliable way to approach this please?

#2 Chappers11050

Forum Newcomer

Group: Members
Posts: 26
Joined: 23-November 10
Reputation: 0
Gender:Male
Location:Teignmouth, Devon, UK
Experience:Beginner
Area of Expertise:Designer/Coder

Posted 18 January 2012 - 11:56 AM

maybe you could use padding? I had a similar issue with my first site, or position attributes?

#3 simplypixie

Forum Newcomer

Group: Members
Posts: 62
Joined: 23-November 11
Reputation: 11
Gender:Female
Location:Shropshire
Experience:Intermediate
Area of Expertise:Web Developer

Posted 18 January 2012 - 02:08 PM

You will need to use something like PHP or JavaScript to calculate the difference between the image and the height of the container (i.e. if the image is 100px high and your box is 140px then you need to deduct image height from box height leaving 40px) and then divide that number by 2 and use that amount to set the top and bottom padding on the image.