SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center vertical issue

    I've been trying all sorts of things to get this image to center vertically. Which method/hack is the best way to pull it off?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    The faq explains how to center vertically and horizontally using css.

    However if you want to use a table then this method should work.
    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>Solid State Record || As Cities Burn</title>
    <style type="text/css">
    * {margin:0;padding:0}
    /* mac hide \*/
    html,body{height:100%}
    /* end hide*/
    body {
     background:#000;
    }
    img {
     border:0;
    }
    table {
     width:100%;
     height:100%;
     text-align:center;
     vertical-align:middle;
    }
    </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">
      <tr> 
    	<td><a href="javascript:popUp('main.php')"><img src="http://www.solidstaterecords.com/asc...d/i/splash.jpg" width="472" height="330" border="0"></a></td>
      </tr>
    </table>
    </body>
    </html>
    The table method is slighly better in that it stops the image disappearing upwards if the page is resized.

    Heres an example of a css way:

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

    Or if the image is randomly sized then you could ues the methhod from here:

    http://www.pmob.co.uk/temp/vertical-align5.htm

    (server seems to be down at the moment so try in a little while if link doesn't work).

  3. #3
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I looked in the FAQ but for some reason the CSS versions wouldn't ever implement well for me. At any rate, what you posted works perfect. Thanks!


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
  •