Question:

Centering to the entire page question.

by | earlier

Hey,

I've tried just about everything I can think of to center this image to the exact center of the page, so that it stays centered no matter what size/resolution the viewer has and/or the size of the browser window.

here is what I keep getting

http://www.twilightpaper.net/testdirectory/

I want it centered though, not centered near the top/bottom, ect..

Anyways any help would be greatly appreciated, I might be missing something really common but its driving me nuts lol..

Thanks

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

3 ANSWERS

Sort By: Date | Rating

Simply put that image in paragraph tags instead of a table, its very outdated to use tables for layout, and it will only make things more difficult for you.

You can then use the position property of css to place it 50% from the top, there is no property which will magically center an element vertically, you will have to use either position or margin.

http://www.brugbart.com/References/107/ - Position Properties

-----StartCode-----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

body {

  margin: 0;

  padding: 0;

  background-color: #CCCCCC;

  text-align: center;

}

.CenterImg {

  position: absolute;

  left: 35%;

  top: 50%;

  margin: 0 auto;

}

</style></head>

<body>

<p clasS="CenterImg"><img src="/images/splash.jpg" /></p>

</body>

</html>

-----CodeEnd-----

Another, perhaps better way, would be to do the below:

-----StartCode-----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

html {

  height:100%;

}

body {

  margin: 0;

  padding: 0;

  background-color: #CCCCCC;

  text-align: center;

  height:100%;

}

div {

  height:50%;

  width: 100%;

}

</style></head>

<body>

<div></div>

<p><img src="/images/splash.jpg" /></p>

</body>

</html>

-----CodeEnd-----
Report (0) (0) |   earlier
right click the picture >format and look through the screens available

you can only centre relative to the left hand edge, not to centre of screen

this is how the automatic scroll bars appear on the bottom and RHS, because the top LHS edge is god.
Report (0) (0) | earlier
Try this

http://eury.freehostia.com/center.htm

source

http://eury.freehostia.com/center.txt

***EDIT

Nevermind...doesn't seem to work with IE7. Let me try again.

.
Report (0) (0) | earlier