How can I make an image appear in the centre of the page?

Ant · Aug 10, 2005

Hi,

I'm trying to make the image appear in the centre of the page no matter what
the resolution is.

I had the idea of creating a 1*1 table whose dimensions were the size of the
viewable browser area and then centering the image in that but I'm running
into some problems.

Then I had the idea of setting the IMG hspace and vspace attributes but then
I realised that they would need ot be dynamically calculated.

So am I missing an obvious method?

If so then please enlighten me!

Cheers

Des · Aug 10, 2005

if this is in a table try this

<table cellpadding="0" cellspacing="0" width="900" align="center">

this will keep things centeral

Desmond.

Toby Inkster · Aug 10, 2005

Ant said:
I'm trying to make the image appear in the centre of the page no matter
what the resolution is.

The best reliable way is to put it as a background image:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>some title</title>
<style type="text/css">
body
{
background-image: url("foo.jpeg");
background-repeat: no-repeat;
background-position: center center;
}
div
{
position: relative;
width: 20em;
left: -99em;
}
</style>
<div>alt text</div>

dingbat · Aug 10, 2005

[placing it as a background image]

Will be a problem for printing though.

Barbara de Zoete · Aug 10, 2005

[placing it as a background image]

Will be a problem for printing though.

What will be? What are you referring to? Where is the quote from the post you
reply to? Who wrote it?

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

Ant · Aug 10, 2005

Thanks everyone for the replies!

I should have mentioned that I would like the image to act as the entrance
to a site - so you click on the picture and get taken to the main page - so
I don't think the background method will work for this - my bad, should have
said.

Jedi Fans · Aug 10, 2005

Ant said:
Thanks everyone for the replies!

I should have mentioned that I would like the image to act as the entrance
to a site - so you click on the picture and get taken to the main page - so
I don't think the background method will work for this - my bad, should have
said.

css:
img.central{position:absolute;width:WIDTHOFIMAGEpx;height:HEIGHTOFIMAGEpx;left:50%;top:50%;margin-top:-HALFOFIMAGEHEIGHTpx;margin-left:-HALFOFIMAGEWIDTHpx;}

html:
<img src="enter.png" class="central" alt="Enter the website" />

Ant · Aug 10, 2005

wow! thanks!!

that did the job perfectly

Jedi Fans said:
css:
img.central{position:absolute;width:WIDTHOFIMAGEpx;height:HEIGHTOFIMAGEpx;left:50%;top:50%;margin-top:-HALFOFIMAGEHEIGHTpx;margin-left:-HALFOFIMAGEWIDTHpx;}

html:
<img src="enter.png" class="central" alt="Enter the website" />

--
Hope This Helped and MTFBWY...
Kieren aka JediFans - <URL:http://jedifans.com/>
The Force Is With Me, SuSE Linux Professional 9.3, Mozilla Firefox 1.0.6,
Mozilla Thunderbird 1.5 Alpha 2 and Revenge Of The Sith!

How do I remove the background of an image (Pygame)	0	Dec 23, 2022
How Do I Set text on an Image and use the image as a border?	7	Mar 16, 2023
How can I remove the extra space marked in the image attached to my Email HTML template?	2	Feb 25, 2023
How to make the tip of a QSlider in PySide2 look like a triangle?	1	Mar 21, 2023
How do I call the exact function on page load?	6	May 19, 2023
How to stop an animated image from sticking to top of page?	2	Feb 17, 2022
Image shifts to the right when export the page to pdf	4	May 5, 2023
How can I calculate the last payment for Reprofiled Amount column with 2 decimal places to make the sum of all payments to be the same as RC amount?	2	Jul 13, 2023

How can I make an image appear in the centre of the page?

Ant

Des

Toby Inkster

dingbat

Barbara de Zoete

Ant

Jedi Fans

Ant

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads