SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery vertical center appearing differently on first page load? Help!

    Hello all,

    I've used a jQuery script I found to vertically center some content on a page I'm designing.

    http://thecloveclub.com/new/index.html

    It works fine on all of the pages apart from the main index linked above. On first load, and even if refreshed, it's not quite centered. However, if I browse to another sub-page, and then click the "home" icon, it centers perfectly.

    Does anyone have any ideas what might cause this?

    Cheers
    MRG

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably has to do with the script. A much easier way would be to take the height of the div in px, divide that by half, then do like so:

    div{
    height:##px; /*height of the div*/
    width:##px; /*width of the div*/
    position:relative;
    top:50%;
    margin-top:-##px; /*negative half the height of the div*/
    }

    It's essentially the same thing the script is trying to do automatically, but somehow failing at.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    The home page looks centered to me, but you have different HTML/CSS for the home page. The home content are in a div called #content_index, while other pages have #content as the content wrapper.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Amsterdam, The Netherlands
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ron Roe View Post
    A much easier way would be to take the height of the div in px, divide that by half, then do like so: (etc.)
    That's indeed a technique that one can use quite often. But not always, because the height of the to center object must be known and set. That is not always the case. And sometimes there are simpler techniques. For all five -- intuitive and valid -- techniques, including a flowchart to determine which technique must or can be used, see the tutorial Vertical Centering in CSS.

    One indeed does not need javascript to center elements or text, and certainly no jQuery.


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
  •