centering images? [Archive] - Hostmonster Forums

patrickjoseph

07-09-2007, 01:48 AM

hello everybody,
this is my first time here. I'm building my webpage and wanted to add a photo on the "intro page" linking it to the rest of my website. I know how to create an image link, but what I don't know how to do is center the image properly so that it looks more professional.

I thought i had it centered in the default software provided but when viewed on other computers it appears off-centered in various positions, depending on which computer or web browser I'm viewing it with.

How do you make it so the image is always displayed in the center of the page, regardless of the browser or computer's screen modifications? I would appreciate any help, thanks.

charlesgan

07-09-2007, 02:56 AM

<div align="center"><img src="yourphoto.jpg"></div>

add a div to wrap the image

sjlplat

07-09-2007, 08:32 AM

To center the page vertically and horizontally, try the following code:

In the <head> section:

<style type="text/css">
#container{
position: absolute;
top: 50%;
left: 50%;
width: 600px; /* theoretical */
height: 400px; /* theoretical */
margin: -200px 0 0 -300px; /* half of the height and half of the width */
}
</style>

In the <body> section:

<div id="container">
<img src="http://www.yoursite.com/path/to/image.jpg" alt="image" title="image">
</div>