PDA

Click to See Complete Forum and Search --> : center picture in browser ?

slam
11-02-2003, 01:46 PM
sorry if this question seems stupid but I'm new at this :

I want to display a GIF sized 840 x 494 on a page and would like to have it centered horizontally and vertically.
Is this possible ? and how to do it ?

thanks for viewing
jrbp
11-02-2003, 02:44 PM
Do you want the picture to be alone? If so use this:

<table height="100%" width="100%">
<tr>
<td height="100%" width="100%" align="center" valign="center">
<img src="image.gif">
</td>
</tr>
</table>

You can also use CSS but im not sure how.
slam
11-02-2003, 04:37 PM
thanks, it didn't know it was that simple !
PeOfEo
11-02-2003, 04:40 PM
there are some good centering tutorials for css on www.bluerobot.com I do not suggesting using tables for layout since that is not what they were designed to do. It is generally a bad idea to use tables for layout.
http://bluerobot.com/web/css/center2.html also the valign property has been depreciated by the w3 so even that simple table is invalid html 4.01
IncaWarrior
11-02-2003, 04:46 PM
you can position it abosolutely 50% 50%
slam
11-02-2003, 04:54 PM
thanks guys,
all I needed was simply to display A picture !
pyro
11-02-2003, 06:08 PM
Combine:

<img src="foo.png" alt="Foo!" style="width: 50px; height: 50px; margin: auto;">

with a valid DOCTYPE (http://www.webdevfaqs.com/html.php#doctype).
IncaWarrior
11-02-2003, 07:06 PM
but it doesn't work...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>My site</title>
<META http-equiv="Content-Type" content="text/html;

charset=ISO-8859-5"></head><body>
<img src="foo.png" alt="Foo!" style="position: absolute; top: 50%; right: 50%;">
</body></html>
pyro
11-02-2003, 07:33 PM
Sorry, try this:

<div style="width: 50px; height: 50px; margin: auto;">
<img src="foo.png" alt="Foo!" style="width: 50px; height: 50px;">
</div>
IncaWarrior
11-02-2003, 07:59 PM
that's better but it's not centered vertically
pyro
11-02-2003, 08:00 PM
It can be: http://www.infinitypages.com/research/verticalcentereddiv.htm
IncaWarrior
11-02-2003, 08:03 PM
and they use absolute positioning like me, only they made the margins so it's exactly centered
pyro
11-02-2003, 09:17 PM
Originally posted by IncaWarrior
...made the margins so it's exactly centered

Which is the correct way to center something. :rolleyes: What if your image was 200x200? Don't you think you'd notice that it's 100 px off, both from the top and left?
IncaWarrior
11-02-2003, 10:48 PM
yes i agree with that way, but i was saying that their way is a bit different from your way. I wasn't disagreeing with it,

(just as a side thought- you don't need to use margins if your picture is 1 or less pixals slam)
pyro
11-02-2003, 10:52 PM
Originally posted by IncaWarrior
yes i agree with that way, but i was saying that their way is a bit different from your way.Their way is my way. Infinity Web Design -> Pyro :)
IncaWarrior
11-03-2003, 01:43 PM
well your other way is differnt from your first way :)
pyro
11-03-2003, 02:27 PM
Yes, because if you do not need to center vertically (and normally, you do not), it is easier to just use margin: auto.