SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Angry Vertical centering

    How can I vertically center?

    I have a div with a fixed width and height of 290px and a slight grey background.

    I am placing a slide show images in there, but I want it centered both x and y so that smaller images show up in the middle.

    Any way to do this effectively?

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doing this isn't as easy as you might think. There are a couple of solutions (obviously the horizontal centering isn't a problem).

    1. Using negative margins and absolute positioning: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
    2. Using Javascript: http://www.alistapart.com/d/footers/...ariation1.html

    Personally when I've done this in the past I've used the javascript option because it struck me as less messy. Plus with Javascript off, the div just reverts to "normal" behaviour so I felt it was unobtrusive. I suppose it does however impinge slightly on the whole presentation=CSS / behaviour=Javascript thing.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    How can I vertically center?
    Read the FAQ as it is explained in detail there .

    Quote Originally Posted by tailslide
    Personally when I've done this in the past I've used the javascript option
    I have some examples here that will center anything with known or unknown heights:

    http://www.pmob.co.uk/pob/vertical-center1.htm

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep that works nicely - but there seems to be 3 divs there and outer, container and inner - are they all required to get that approach to work as it's a fair bit of extra markup.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thank you both, I have decided to use javascript, since afterall it is a slide show, so i am guaranteed to have javascript on, which to me seems more reliable than the various CSS interpretations.

    I did run into a problem, and although this is a javascript question its in the same topic so i'll here..

    HTML Code:
    		alert(document.getElementById('current-img').offsetHeight);
    		document.getElementById('current-img').src = img[i];
    		alert(document.getElementById('current-img').offsetHeight);
    This is how I was swapping out the images, afte rthe fade in and fade out, but both above and below the image swap, it returns the same offset data, which is causing the javascript to not center properly. How do I solve this issue? The bottom alert should update to the newest image no?

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Los Angeles CA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wonshikee View Post
    Thank you both, I have decided to use javascript, since afterall it is a slide show, so i am guaranteed to have javascript on, which to me seems more reliable than the various CSS interpretations.

    I did run into a problem, and although this is a javascript question its in the same topic so i'll here..

    HTML Code:
    		alert(document.getElementById('current-img').offsetHeight);
    		document.getElementById('current-img').src = img[i];
    		alert(document.getElementById('current-img').offsetHeight);
    This is how I was swapping out the images, afte rthe fade in and fade out, but both above and below the image swap, it returns the same offset data, which is causing the javascript to not center properly. How do I solve this issue? The bottom alert should update to the newest image no?
    If your images are inline, have you tried setting the line-height of your div to 290px?

  7. #7
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    If your images are inline, have you tried setting the line-height of your div to 290px?
    Yes I tried this, this didn't work for me in both FF and IE6

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I did run into a problem, and although this is a javascript question its in the same topic so i'll here..
    If you'd used my method I would have an answer for you but as this is now a javascript question I will move the thread to the appropriate forum now


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
  •