Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Very Quick web design question

pianodude123

pianodude123

macrumors 6502a
Original poster
Mar 1, 2005
698
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.
 
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
 
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.
 
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... ;)
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back