Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts

    vertical-align not working...

    I have the following code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en_GB">
    <head>
    <title>F1 Unleashed Version 2 Coming Soon</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="shortcut icon" href="http://geoffers.uni.cc/favicon.ico"> 
    <style type="text/css">
    * { margin: 0; padding: 0; }
    
    html, body { background-color: rgb(0, 0, 0); height: 100%; width: 100%; text-align: center; }
    
    img {
    vertical-align: middle;
    }
    
    div {
    height: 100%;
    }
    </style>
    </head>
    <body>
    <div>
    <img src="image.jpg" alt="F1 Unleashed Version 2 Coming Soon">
    </div>
    </body>
    </html>
    The image appears in the centre (horizontally) like I want it to, but does not vertically...

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    It's not exactly the best method if you're gonna be having other things on the page but if this is all that you're gonna have you could use:

    Code:
    div { height: 50%; top: 50%; }
    leaving everything else the same will make it appear to be vertically centred.

    Edit: vertical-align allows you to position surrounding text. It's not where the image appears, but where text appears relative to the image


    Just a thought
    Last edited by Badman3k; 02-10-2005 at 10:08 PM.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Centering vertically is tricky sometimes. Here's what I do:

    If it's a large div, or one big container div in the middle of the page, I use margins and relative positioning. Say the image (or div) was 100px high...
    Code:
    img {
     margin-top: 50%;
     position: relative;
     top: -50px;
     }
    ... and that scoots it where it needs to be. If it's smaller, contained in a div with content, for example, or you need to center text vertically in a div, I like to use this (let's say you need to center text in a 100px high div)...
    Code:
    #content {
     margin: 0 auto;
     border: solid 1px #ccc;
     width: 500px;
     height: 100px;
     line-height: 100px;
     }
    
    p	{
     padding: 0;
     margin: 0;
     }
    
    <div id="content"><p>content content content</p></div>
    ... having the line-height the same height as the div sets the baseline right in the middle, although whatever's being put there obviously can't have any margins or padding, as that will push it down further. It works for images, too.

    Hope this helps,

  • #4
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Thanks rmedek

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    no problem


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •