Grow your CSS skills. Land your dream job.

Vertical Alignment

  • # November 2, 2008 at 8:41 am

    Hi,

    I’m making a website that has a fixed width en height. Is it possible to center this vertically? Horizontal is easy using a pagewrap with margin: 0 auto. I didn’t find anything about vertical center.
    Thanks.

    # November 2, 2008 at 11:15 pm

    I always use the margin.

    margin:0 auto centers the site, this is true. the 0 is the up and down, the auto is the left and right. You could do

    margin:100px auto; 100 being whatever number from the top you need it to be

    # November 3, 2008 at 3:01 am

    Thanks for your reply.

    I thought of that, but this isn’t what i want. I would like to center dynamically, just like horizontal center. So when you scale the browser window, the content flows with it.
    For example if you have a website with say 500px width and height and you would like to position this exactly in de middle of the browser window. How could this be done in CSS?
    I know of a method using a table (using vertical-align on <TR>) but i would like to use only CSS for my page-layout. The reason for this is that my users will be able to select a different layout (CSS Selector). Use of a table would mess things up.

    by the way: why doesn’t "margin:auto auto;" work? :(

    greetings Bert

    (Sorry for my bad english, it’s not my native language :oops: )

    # November 3, 2008 at 4:25 am

    Hi you can specify a margin-top using percent.
    Something like : margin-top:15%;

    # November 3, 2008 at 4:33 am

    Look at this code snippet:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


    Header

    contents


    The ‘box’ is centered horizontally, but not vertically. Any comments?

    gr. Bert

    # November 3, 2008 at 4:43 am
    "Chocopunk" wrote:
    Hi you can specify a margin-top using percent.
    Something like : margin-top:15%;

    Thanks for your reply.
    How would this solve my problem?

    gr. Bert

    # November 3, 2008 at 4:52 am

    havent tried it myself, but it looks like its working:

    http://d-graff.de/fricca/center.html

    # November 3, 2008 at 5:26 am
    "Argeaux" wrote:
    havent tried it myself, but it looks like its working:

    http://d-graff.de/fricca/center.html

    Thanks a lot. I’ll have a look at this. Looks just what i needed.

    gr. Bert

    # November 3, 2008 at 10:05 am

    a big cheers to Chris :D
    http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

    gr. Bert

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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