SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically align an image

    Ok, I've done my googling, and I've searched this forum, but everything I've tried has failed.

    What I'm trying to do is to align an image vertically and horizontally in the center of the page.

    I can get it horizontally with CSS, but not vertically.
    vertical-align seems to do nothing, line-height as well.

    Any ideas?
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Steve & Michelle's Wedding Website</title>
    <style>
    .va-middle { vertical-align: 50%; }
    body { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0 }
    </style>
    </head>
    
    <body>
    
    <div style="height: 100%; width: 100%; text-align: center" class="va-middle">
     <img src="images/coming_soon.jpg">
    </div>
    
    </body>
    </html>
    http://www.steveandmichelleswedding.com/index.html
    I've tried putting it on a bunch of elements, nothings worked.

    Using IE6.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  2. #2
    Free Geek computerages's Avatar
    Join Date
    Oct 2004
    Location
    /dev/null
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try changing ".va-middle" to this
    Code:
    .va-middle { margin: 50% 0; }

  3. #3
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does it, but it also doubles the length of the page.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Ok, I've done my googling, and I've searched this forum,
    You didn't look very far then

    Heres the FAQ :

    http://www.sitepoint.com/forums/show...42&postcount=9

    For a more complicated example have a look at this link also:

    http://www.pmob.co.uk/temp/flashbg.htm

    If you still can't work it out then post back here and I'll apply the changes for you

    Note that vertical align only aligns inline elements on a single line (or table cell) and is not used on block level elements.

    Paul

  5. #5
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Meh, I'm blind. Thanks.
    The first example in the faq worked just how I wanted.

    I find it rather silly that you have to do so much just to get it to sit halfway down the screen...
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*


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
  •