[Dojo-interest] How to center an image of unknown size?

Tue Jan 30 11:44:10 MST 2007

Horizontally you can set the margin:0px auto;   the 'auto' will if the
containing element has a width value entered center the image.

Vertically. Well you need to know 2 things.  the height of the
containing Element and the height of the image which you can get using
various methods in dojo.html such as getContentBoxHeight,
getBorderBoxHeight, etc... depending on what you've layed out.

Once you've done  that subtract he height of the image from the height
of the containing element. Divide by 2 and set the margin first value
in the margin declaration about to that number.
margin:(computedNumber)px auto;

vance

On 1/30/07, Rhapidophyllum <rhapidophyllum at cox.net> wrote:
> Is there a way to center (both horizontally and vertically) an image of
> unknown size?
> I've included a simplified file (both in-line & attached), to show
> where I'd like to do this.  Thanks!
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
>         lang="en" style="height:100%; width:100%;">
> <head>
>         <meta http-equiv="Content-Type"
>                 content="text/html; charset=utf-8"/>
>         <title>Photo Display</title>
>         <script type="text/javascript">
>                 var djConfig = { isDebug: true };
>         </script>
>         <script type="text/javascript"
>                 src="../dojo/dojo.js">
>         </script>
>         <script language="JavaScript" type="text/javascript">
>                 dojo.require("dojo.widget.*");
>         </script>
> </head>
>
> <body style="height:100%; width:100%;
>         background-color:#FF7777;">
>
> <div dojoType="LayoutContainer"
>         id="main"
>         layoutChildPriority='none'
>         style="height:100%; width:100%; background-color:#AAAAAA;"
>  >
>         <div dojoType="ContentPane"
>                 id="topbar"
>                 layoutAlign="top"
>                 style="background-color:#7777FF; height:80px;"
>         >
>                 Top Bar
>         </div>
>
>         <div dojoType="ContentPane"
>                 id="photo_pane"
>                 layoutAlign="client"
>                 style="background-color:#333333; color:#DDDDDD"
>         >
>                 Photo of unknown size goes here.
>                 It should be centered vertically and horizontally.
>         </div>
>
>         <div dojoType="ContentPane"
>                 id="botbar"
>                 layoutAlign="bottom"
>                 style="background-color:#77FF77; height:80px;"
>         >
>                 Bottom Bar
>         </div>
>
> </div>
> </body>
> </html>
>
>
> _______________________________________________
> Dojo FAQ: http://dojo.jot.com/FAQ
> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> Dojo-interest at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-interest
>
>
>
>

-- 
Most People are not even aware of their need to conform. They live
under the illusion that they follow their own ideas and inclinations,
that they are individualists, that they have arrived a their opinions
as the result of their own thinking – and that it just happens that
their ideas are the same as those of the majority
-- Eric Fromm