html alignment question

Discussion in 'OT Technology' started by wkd, Nov 8, 2005.

  1. wkd

    wkd Member

    Joined:
    Sep 8, 2004
    Messages:
    508
    Likes Received:
    2
    Location:
    Melbourne, Australia
    how would i go about making an img dead center in a browser at any res, horizontally and vertically?

    this is my test design at the moment. i did the vertical alignment manually but i need to find a way to keep the image centered at any res.

    http://members.optushome.com.au/~do.boy/test.htm
     
  2. SNovotny

    SNovotny New Member

    Joined:
    Jan 11, 2005
    Messages:
    163
    Likes Received:
    0
    Use a table?:dunno:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    body{
        background-color:black;
        }
    </style>
    <title>Page Title</title>
    </head>
    <body>
    <table align="center">
    <tr valign="middle"><td>
    <img src="http://members.optushome.com.au/~do.boy/BACKGROUNDx720.jpg" alt="splash image">
    </td></tr></table>
    </body>
    </html>
    
     
  3. wkd

    wkd Member

    Joined:
    Sep 8, 2004
    Messages:
    508
    Likes Received:
    2
    Location:
    Melbourne, Australia
    thanks but that still doesn't make it center vertically
    any other ideas?
     
  4. Deevan

    Deevan Active Member

    Joined:
    Jul 12, 2005
    Messages:
    11,720
    Likes Received:
    0
    Location:
    Orlando, FL USA Posts: 4
    Code:
    <!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN">
    <html>
    
    <head>
    <title>A title</title>
    
    
    
    </head>
    
    
    
    <body>
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center" height="*" valign="middle">
         <div align="center>
    <img src="images/yourimage.gif" border="0"></a></div>
    </td>
      </tr>
    
      </table>
    </body>
    
    </html>
     
    Last edited: Nov 8, 2005
  5. Deevan

    Deevan Active Member

    Joined:
    Jul 12, 2005
    Messages:
    11,720
    Likes Received:
    0
    Location:
    Orlando, FL USA Posts: 4
    It works at Splashdownprod.com.
     
    Last edited: Nov 8, 2005
  6. fatlip

    fatlip Transcendence Into The Peripheral

    Joined:
    Jun 16, 2001
    Messages:
    522
    Likes Received:
    1
    Location:
    UK
    It can be done with css by using negative margins, like so:

    Code:
    <html>
    <head>
    <title>Test</title>
    <style>
    .CenterDiv
    {
    	position: absolute;
    	width: 100px;
    	height: 100px;
    	left: 50%;
    	top: 50%;
    	background-color: black;
    	margin-left: -50px;
    	margin-top: -50px;
    }
    </style>
    </head>
    <body>
    
    <div class="CenterDiv"></div>
    
    </body>
    </html>
    
    This will produce a black box in the centre of the screen. To use it with your image, replace the width and height with that of your image, and then adjust the left and top negative margins to be half of these values. Then you just drop your image tag in the div and your good to go.
     

Share This Page