Very Quick web design question

pianodude123

macrumors 6502a
Original poster
Mar 1, 2005
697
0
in the internet
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.
 

slightly

macrumors regular
Mar 14, 2003
110
0
Beacon, NY
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
 

pianodude123

macrumors 6502a
Original poster
Mar 1, 2005
697
0
in the internet
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.
 

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,796
165
Bergen, Norway
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... ;)
 

epochblue

macrumors 68000
Aug 12, 2005
1,671
0
Nashville, TN
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.