Very Quick web design question [Archive]

View Full Version : Very Quick web design question

pianodude123

Jul 24, 2007, 02:25 PM

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

Jul 24, 2007, 02:37 PM

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

Jul 24, 2007, 02:48 PM

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.

DigitalAx

Jul 24, 2007, 02:56 PM

Go here (http://www.waxpad.com/articles/vcexample.html) and steal the code. Explained more here (http://www.waxpad.com/articles/waverticalcentering.html).

;)

Mitthrawnuruodo

Jul 24, 2007, 03:20 PM

Or just swallow your pride and use a table**:

<!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>


</td>
</tr>
</table>
</body>
</html>

**I prefer not to use tables for page layout, but I will always choose practicality over principle... ;)

epochblue

Jul 24, 2007, 03:32 PM

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.