SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: vertical-align

  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    vertical-align

    I'm having trouble vertical-aligning an element inside a div for the simple reason that you cannot give a div a height of 100%.. I have a wrapper div right inside <body> & I want it to be same height as window-height, is this possible? it seems to me it should be possible with height:100%, then image could be vertical-align:middle.. (img is about 600px high, it's the only element on the page.. I want it to be centered on the page, both horizontally and vertically.. how do I do this..)

    thank you..

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    (img is about 600px high, it's the only element on the page.. I want it to be centered on the page, both horizontally and vertically.. how do I do this..)
    Hi maya,

    If your image is the only element on the page I would be inclined to use Paul's "Easy Vertical Centering" method.

    The updated method uses a float and it is discussed about half way down the page as "The Fix".

    You could just set the static #hoz div to the same size as your image and it should work out fine. You could even set your image as a BG image on that div.

    The #vertical float div sits on it's own above the #hoz (content) div and controls the vertical centering, view the page source of the link below for details.

    Here is the live example of the float method.

    Drag your browser window around and you will see that it does just what you are wanting.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Vertical alignment is tricker then it seems, you can look at this
    http://www.pmob.co.uk/temp/vertical-align.htm
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you... the method you post
    (http://gtwebdev.com/workshop/vcenter...inline-css.php) seems like a fairly simple one.. BUT: how do I set the containing div to same height as browser window???

    this is what I have now:

    <div id="wrapper">
    <img src="images/img.gif" width="600" height="600" alt="imgTest"/>
    </div>


    CSS:
    body { margin:0; }
    #wrapper { display: table; margin:0 auto; width:600px; height:100% ;}
    img {display: table-cell; vertical-align: middle; }

    but img is up against top edge of browser window..

    thank you..

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The method I showed you earlier is actually easier and it does not rely on display:table; which is not supported by IE6/7.

    Give this a try, I have set your image name and dimensions on it.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Easy Vertical Centering To Browser Viewport</title>
     
    <style type="text/css">
    html,body{
        height:100%;/*reference for v-float height*/
        margin:0;
        padding:0;
    }
    body{
        background:#FFF;
        min-width:800px;
        min-height:600px;/*set min-height same as #img-wrap total height*/
    }
    #v-float{
        float:left;
        height:50%;
        margin-top:-300px;/*half of #img-wrap total height*/
        width:100%;
    }
    #img-wrap {
        clear:both;
        width:600px;
        height:600px;
        margin:0 auto;
        background:#BBB url(images/img.gif) no-repeat;
        overflow:auto;/*establish margin clearance and insure access to content*/
    }
    h3 {
        margin:1em;
        text-align:center;
    }
     
    </style>
    </head>
    <body>
     
    <div id="v-float"></div>
    <div id="img-wrap">
        <h3>The image is set as a background image on this div</h3>
    </div>
     
    </body>
    </html>

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes, this method works indeed!!

    thank you very much..


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
  •