Grow your CSS skills. Land your dream job.

Solution to centering vertically

  • # November 30, 2009 at 2:56 pm

    I have been looking how I can center my site vertically but to no success. I have got it to work fixing the position but then if the browser window is smaller than the content the user can not scroll so that is no good.

    Any suggestions?

    Site is temp up at http://jamieknop.com/testfolder/

    Thanks,
    Jamie

    # December 1, 2009 at 5:45 am

    Ok so now I am using the method of tables because all else has failed and even this is not working…

    Code:

    My website

    http://jamieknop.com/testfolder/index.html

    Any advice?

    Cheers,
    Jamie

    # December 1, 2009 at 1:17 pm

    You might be able to try something like this:

    http://css-tricks.com/what-is-vertical-align/

    Wrapping the whole site in a div and then adding the vertical align to it.

    # December 1, 2009 at 1:23 pm

    Attempted with v-align.

    Current method still failure :/

    Code:
    body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    }
    #container {
    width: 900px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    display: table-cell;
    vertical-align: middle;
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".