Search code examples
htmlcssdreamweaver

Center swf object on html page


I have an SWF object that I have embedded on an html page. I simply want to center the object on the screen. I've tried a hundred different things (setting the align attributes on the object to center, wrapping the object in a div and centering that...) but the object always appears flush with the left side of the screen. I'm sure its a very simple line of code somewhere that will make this work, please enlighten me as to what that is...

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// --><head>
    <title></title>
    <meta name="google" value="notranslate" />         
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css" media="screen"> 
        html, body  { height:100%; }
        body { margin:0; padding:0; overflow:auto; text-align:center; background-     position:center;
               background-color: #000000;}   
        object:focus { outline:none; }
             #flashContent { display:; }

 </style>

    <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
    <!-- BEGIN Browser History required section -->
    <link rel="stylesheet" type="text/css" href="history/history.css" />
    <script type="text/javascript" src="history/history.js"></script>
    <!-- END Browser History required section -->  

    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
        // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. 
        var swfVersionStr = "10.2.0";
        // To use express install, set to playerProductInstall.swf, otherwise the empty string. 
        var xiSwfUrlStr = "playerProductInstall.swf";
        var flashvars = {};
        var params = {};
        params.quality = "high";
        params.bgcolor = "#000000";
        params.allowscriptaccess = "sameDomain";
        params.allowfullscreen = "true";
        var attributes = {};
        attributes.id = "Main";
        attributes.name = "Main";
        attributes.align = "middle";
        swfobject.embedSWF(
            "Main.swf", "flashContent", 
            "100%", "100%", 
            swfVersionStr, xiSwfUrlStr, 
            flashvars, params, attributes);
        // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
        swfobject.createCSS("#flashContent", "display:block;text-align:center;");
    </script>
</head>
<body>

    <div id="flashContent" align="center">
        <p>
            To view this page ensure that Adobe Flash Player version 
            10.2.0 or greater is installed. 
        </p>
        <script type="text/javascript"> 
            var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
            document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
                            + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
        </script> 
    </div>

    <noscript>
    <div align="center">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" align="middle" id="Main">
        <param name="movie" value="Main.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#000000" />
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="opaque" />
        <!--[if !IE]>-->
        <object data="Main.swf" type="application/x-shockwave-flash" width="100%" height="100%" align="middle">
          <param name="quality" value="high" />
          <param name="bgcolor" value="#000000" />
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="allowFullScreen" value="true" />
          <param name="wmode" value="opaque" />
          <!--<![endif]-->
          <!--[if gte IE 6]>-->
          <p> 
            Either scripts and active content are not permitted to run or Adobe Flash Player version
            10.2.0 or greater is not installed.
            </p>
          <!--<![endif]-->
          <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>
          <!--[if !IE]>-->
          </object>
        <!--<![endif]-->
        </object>
    </div>
    </noscript>     
   </body>
</html>

PS this is my issue when I try to edit the html file generated with the SWF. When I try to create a new HTML file and embed the swf in it, I can center the file, but I can't get it the object to scale to fit the vertical dimensions of the screen (the objects at the bottom of the page are below view, whereas on the automatically-generated html file, the swf auto-zooms to fit the screen, but I can't center it..) A solution to either of these problems would be greatly appreciated


Solution

  • Here is an example in jsFidle

    It's very simple, you use absolute position and just specify 50% from top and left and then put top and left negative margin half of the container.

    Here is the css:

    .container{
        width: 400px;
        height: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -200px;
        background-color: blue;
    }
    

    Remember, for this to work you need either fixed size or javascript updating margins on window resize event!

    Here is an HTML markup:

    <div class="container">
        <iframe width="400" height="400" src="http://www.youtube.com/embed/Awlp8B5os0k" frameborder="0" allowfullscreen></iframe>
    </div>