sorry if this question seems stupid but I'm new at this :<br />
<br />
I want to display a GIF sized 840 x 494 on a page and would like to have it centered horizontally and vertically.<br />
Is this possible ? and how to do it ?<br />
<br />
thanks for viewing<!--content-->Do you want the picture to be alone? If so use this:<br />
<br />
<table height="100%" width="100%"><br />
<tr><br />
<td height="100%" width="100%" align="center" valign="center"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.gif"><br />
</td><br />
</tr><br />
</table><br />
<br />
You can also use CSS but im not sure how.<!--content-->thanks, it didn't know it was that simple !<!--content-->there are some good centering tutorials for css on <!-- w --><a class="postlink" href="http://www.bluerobot.com">www.bluerobot.com</a><!-- w --> 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.<br />
<!-- m --><a class="postlink" href="http://bluerobot.com/web/css/center2.html">http://bluerobot.com/web/css/center2.html</a><!-- m --> also the valign property has been depreciated by the w3 so even that simple table is invalid html 4.01<!--content-->you can position it abosolutely 50% 50%<!--content-->thanks guys,<br />
all I needed was simply to display A picture !<!--content-->Combine:<br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="Foo!" style="width: 50px; height: 50px; margin: auto;"><br />
<br />
with a valid DOCTYPE (<!-- m --><a class="postlink" href="http://www.webdevfaqs.com/html.php#doctype">http://www.webdevfaqs.com/html.php#doctype</a><!-- m -->).<!--content-->but it doesn't work...<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/html4/loose.dtd"><br />
<html><head><br />
<title>My site</title><br />
<META http-equiv="Content-Type" content="text/html; <br />
<br />
charset=ISO-8859-5"></head><body><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="Foo!" style="position: absolute; top: 50%; right: 50%;"> <br />
</body></html><!--content-->Sorry, try this:<br />
<br />
<div style="width: 50px; height: 50px; margin: auto;"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="Foo!" style="width: 50px; height: 50px;"> <br />
</div><!--content-->that's better but it's not centered vertically<!--content-->It can be: <!-- m --><a class="postlink" href="http://www.infinitypages.com/research/verticalcentereddiv.htm">http://www.infinitypages.com/research/v ... reddiv.htm</a><!-- m --><!--content-->and they use absolute positioning like me, only they made the margins so it's exactly centered<!--content-->Originally posted by IncaWarrior<br />
...made the margins so it's exactly centered<br />
<br />
Which is the correct way to center something.
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?<!--content-->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,<br />
<br />
(just as a side thought- you don't need to use margins if your picture is 1 or less pixals slam)<!--content-->Originally posted by IncaWarrior <br />
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
<!--content-->well your other way is differnt from your first way <!--content-->Yes, because if you do not need to center vertically (and normally, you do not), it is easier to just use margin: auto.<!--content-->
<br />
I want to display a GIF sized 840 x 494 on a page and would like to have it centered horizontally and vertically.<br />
Is this possible ? and how to do it ?<br />
<br />
thanks for viewing<!--content-->Do you want the picture to be alone? If so use this:<br />
<br />
<table height="100%" width="100%"><br />
<tr><br />
<td height="100%" width="100%" align="center" valign="center"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.gif"><br />
</td><br />
</tr><br />
</table><br />
<br />
You can also use CSS but im not sure how.<!--content-->thanks, it didn't know it was that simple !<!--content-->there are some good centering tutorials for css on <!-- w --><a class="postlink" href="http://www.bluerobot.com">www.bluerobot.com</a><!-- w --> 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.<br />
<!-- m --><a class="postlink" href="http://bluerobot.com/web/css/center2.html">http://bluerobot.com/web/css/center2.html</a><!-- m --> also the valign property has been depreciated by the w3 so even that simple table is invalid html 4.01<!--content-->you can position it abosolutely 50% 50%<!--content-->thanks guys,<br />
all I needed was simply to display A picture !<!--content-->Combine:<br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="Foo!" style="width: 50px; height: 50px; margin: auto;"><br />
<br />
with a valid DOCTYPE (<!-- m --><a class="postlink" href="http://www.webdevfaqs.com/html.php#doctype">http://www.webdevfaqs.com/html.php#doctype</a><!-- m -->).<!--content-->but it doesn't work...<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/html4/loose.dtd"><br />
<html><head><br />
<title>My site</title><br />
<META http-equiv="Content-Type" content="text/html; <br />
<br />
charset=ISO-8859-5"></head><body><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="Foo!" style="position: absolute; top: 50%; right: 50%;"> <br />
</body></html><!--content-->Sorry, try this:<br />
<br />
<div style="width: 50px; height: 50px; margin: auto;"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="Foo!" style="width: 50px; height: 50px;"> <br />
</div><!--content-->that's better but it's not centered vertically<!--content-->It can be: <!-- m --><a class="postlink" href="http://www.infinitypages.com/research/verticalcentereddiv.htm">http://www.infinitypages.com/research/v ... reddiv.htm</a><!-- m --><!--content-->and they use absolute positioning like me, only they made the margins so it's exactly centered<!--content-->Originally posted by IncaWarrior<br />
...made the margins so it's exactly centered<br />
<br />
Which is the correct way to center something.
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?<!--content-->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,<br /><br />
(just as a side thought- you don't need to use margins if your picture is 1 or less pixals slam)<!--content-->Originally posted by IncaWarrior <br />
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
<!--content-->well your other way is differnt from your first way <!--content-->Yes, because if you do not need to center vertically (and normally, you do not), it is easier to just use margin: auto.<!--content-->