center a website in flex

问题

I am trying to make a websites in flex. I am facing the problem that my website page is not centered. I Have searched google but haven't succeeded yet.

I am trying to center <s:Application> on my web browsers instead of starting from left hand How can i do that?

回答1:

As per my understanding: -

1) you are trying to embed swf in to HTML, if you want your swf to be at the center of HTML you have to embed swf in to one container on HTML side. Place your container position at center by providing x, y, height and width to it.

If you are using HTML you can do in this below way: - Where as width="400" height="300" as your Flex Application swf width and height or keep swf width="100%" height="100%" You can replace AreaChart.swf with your swf name.

I think this can solve your problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Tittle Here</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <style type="text/css" media="screen">
            html, body { height: 100%; margin:0; padding:0; text-align: center; }
            div#centered { border:0; height: 50%; width: 50%; position: absolute; left: 25%; top: 25%; color: black; }
        </style>        
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
        swfobject.registerObject("myId", "8.0.0", "expressInstall.swf");
        </script>
    </head>
    <body>
        <div id="centered">    
            <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="300">
            <param name="movie" value="AreaChart.swf" />
            <param name="scaleMode" value="showAll" />
            <param name-"quality" value="best" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="AreaChart.swf" width="400" height="300">
                <!--<![endif]-->
                <div id="altContent">
                    <h1>You need to upgrade your Flash player.</h1>
                    <p>
                    <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                    </p>
                </div>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

else

2) If you are trying to center your Flex content inside of your Flex application than you have to create one container and inside that you have to port your all logic including visual component etc.

Ex: -

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"
               width="800" height="600" >
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;

            private function creationComp():void
            {
                mainContainer.x = FlexGlobals.topLevelApplication.width/2 - mainContainer.width/2;
                mainContainer.y = FlexGlobals.topLevelApplication.height/2 - mainContainer.height/2;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <local:MainContainer id="mainContainer" width="50%" height="50%" creationComplete="creationComp()"/>

</s:Application>

Where as MainContainer.mxml will contain for all visual component/elements.

This may help you.

There might be better solution to this.

来源：https://stackoverflow.com/questions/11225340/center-a-website-in-flex

标签

apache-flex

flexbuilder