Very Quick web design question

Discussion in 'Web Design and Development' started by pianodude123, Jul 24, 2007.

  1. pianodude123 macrumors 6502a

    pianodude123

    Joined:
    Mar 1, 2005
    Location:
    in the internet
    #1
    hi,

    I am making a small website for someone... it is just one page no links at all, just an image... and I am wondering how I can get that image to always be in the center of the page... without using clunky px alignment.

    So far I;ve been able to get the image to go to the center of the page, however it always stays at the top of the page, instead of centering and going to the middle of the page...

    so that it is at the absolute center...

    Thanks.
     
  2. slightly macrumors regular

    slightly

    Joined:
    Mar 14, 2003
    Location:
    Beacon, NY
    #2
    Hi

    Here's how I do it. Make the first element in the body a div, and give that div the following style:

    style="position:fixed; top:0px; left:0px;
    width:905px; height:576px;
    top:50%; left:50%;
    margin-top:-288px; margin-left:-452px;"

    Set the margin-top to (negative) half of your image height, and the margin-left to (negative) half of your image width.

    Matt
     
  3. pianodude123 thread starter macrumors 6502a

    pianodude123

    Joined:
    Mar 1, 2005
    Location:
    in the internet
    #3
    See, but the thing with that is that if somebody resizes their window then the image stays in the same position... I need something that stays dynamic... like this:

    <div align="center">

    but for the absolute middle... so that it goes into the middle of the page not just the top center.
     
  4. RojoLeo macrumors 6502

    Joined:
    Mar 11, 2007
    Location:
    Austin, TX
  5. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #5
    Or just swallow your pride and use a table**:

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">		
        <title></title>
        <style type="text/css">
          html, body { height: 100%; padding: 0; margin: 0; }
          table { text-align: center; height: 100%; width: 100%; border: 0; }
        </style>
      </head>
      <body>
        <table>
          <tr>
            <td>
            <!-- Place contents here for absolute centering -->
              	
            </td>
          </tr>
        </table>
      </body>
    </html>
    **I prefer not to use tables for page layout, but I will always choose practicality over principle... ;)
     
  6. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #6
    You could also just set text-align: center on the containing element...or even the body element if it's only an image.

    ...or you could set margin: 0 auto on the image itself.
     

Share This Page