SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically aligning an image in a div

    Hi

    Please see the following URL:

    http://www.tenthtime.co.uk/samsung-l...0e-32in-lcd-tv

    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.
    Last edited by Mittineague; May 26, 2011 at 15:50. Reason: OP forgot to turn off auto-title

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The surrounding div has a height set on it that you should remove:

    Code:
    #product_page_left_section {
      border-right: 1px solid #E0DCCD;
      float: left;
      height: 354px; /* remove this */
      overflow: hidden;
      padding-left: 14px;
      padding-top: 14px;
      width: 433px;
    }

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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):

    Code:
    <img style="margin-bottom:-15px" height="200" width="200" src="http://images.productserve.com/preview/980/113190551.jpg" 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.)

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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):

    Code:
    <img style="margin-bottom:-15px" height="200" width="200" src="http://images.productserve.com/preview/980/113190551.jpg" 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?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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:

    Code:
    <table width="100%" style="height:290px">
    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).

    Edit:


    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You can do something like this in CSS if you have a fixed height to play with.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •