Vertically aligning an image in a div


Please see the following URL:

What I’m trying to do is vertically align the product image, in this case a picture of a television, so that it is always vertically central in the available space.

If you look at it right not the space at the bottom is somewhat greater than at the top, i.e. between the image and the product name text. The space available and size of the image will vary.

Any ideas? I’ve been wracking my brains on this one!

Thanks. :slight_smile:

The surrounding div has a height set on it that you should remove:

#product_page_left_section {
  border-right: 1px solid #E0DCCD;
  float: left;
  [COLOR="Red"]height: 354px;[/COLOR] /* remove this */
  overflow: hidden;
  padding-left: 14px;
  padding-top: 14px;
  width: 433px;

Thanks for the response.

Unfortunately I don’t think it’s quite as simple as removing the height. If I remove it, I have to tweak things elsewhere in the layout to prevent it from breaking. These secondary changes then serve to defeat the object.

Is there another way of doing this?

Well, I don’t recommend this sort of thing in general, but one thing you could do is to add the code in red (preferably in the style sheet, but here inline for simplicity):

<img [COLOR="Red"]style="margin-bottom:-15px"[/COLOR] height="200" width="200" src="" alt="image">

(The reason I say I don’t recommend it is because it would be better to fix the real problem and make the page alterations that you meantioned.)

Ah, I think this is where I may have been a little unclear in my initial explanation. This is a dynamic page and the size of the image and available space (i.e. the title text may flow onto two lines) will vary.

With this in mind, I don’t think this is going to work in all cases, is it?


You say the space available will change and yet you say you can’t remove the height? If you can’t remove the height then the space available is always the same isn’t it - unless I missed something or perhaps the height is being added dynamically?

If you are always keeping the parent to a fixed height then just make the table the correct height to fill the space and the image will automatically be centred within the td no matter what size it is (as long as its not bigger than the td of course).

In your table you have an inline style with a height added that seems to be too small. If you increase it like so:

<table width="100%" style=[B]"height:290px"[/B]>

Then the image will be vertically centred. (of course you shouldn’t be using inline styles anyway and should add a class to the table).


I just read your last post and if the title may also increase then you’d probably need to put the title in a table cell in the same table as the image to manage the height properly.

However, I think that the way that you have that set up is too fragile and relying on set heights to match things up is not the best way to go about things. If for instance you knock the text size up a couple of settings then you start losing text straight away as the right side doesn’t keep pace with the left of that section.

I would have created that whole horizontal bar as a footer to both the top 2 right columns above so that it always matched up without height being needed. Or if you really wanted three separate columns then don’t try and match elements from one column in line with the other column as that is unmanageable.

You can do something like this in CSS if you have a fixed height to play with.