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 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    563
    Thanks
    0
    Thanked 3 Times in 3 Posts

    vertical-align: middle

    I'm trying to center 1 image on a page.

    The page only contains the 1 image, how do i get it centered horizontally and vertically using divs?

    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can't use vertical-align on a block level element. What you can do however is something like this.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Completely Centered Image</title>
    <style type="text/css">
    body {
    text-align:center;
    }
    #oneimage {
    /*hide from IE Mac\*/
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px; /*this is half the height of the image*/
    margin-left:-100px; /*this is half the width of the image*/
    /*end hiding*/
    }
    </style>
    </head>
    
    <body>
    <img id="oneimage" src="yourimage.jpg" alt="" width="200" height="200">
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nb - vertical-align is only for table cells, afaik.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you are trying to center just one image why don't you use background-image, background-repeat and background-position?
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

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