1

HTMLページに埋め込んだSWFオブジェクトがあります。オブジェクトを画面の中央に配置したいだけです。私は100の異なることを試みました（オブジェクトの整列属性を中央に設定し、オブジェクトをdivでラップし、それを中央に配置します...）が、オブジェクトは常に画面の左側と同じ高さに表示されます。これを機能させる非常に単純なコード行があると確信しています。それが何であるかを教えてください...

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これは、SWFで生成されたhtmlファイルを編集しようとしたときの私の問題です。新しいHTMLファイルを作成してswfを埋め込むと、ファイルを中央に配置できますが、画面の垂直方向のサイズに合わせてオブジェクトを拡大縮小することができません（ページ下部のオブジェクト）。はビューの下にありますが、自動生成されたhtmlファイルでは、swfは画面に合わせて自動ズームしますが、中央に配置できません。）これらの問題のいずれかに対する解決策をいただければ幸いです。

4

1 に答える 1

1

これがjsFidleの例です

非常に簡単です。位置を使用し、コンテナの半分のマイナスマージンを配置してabsoluteから50％を指定するだけです。toplefttopleft

これがcssです：

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

これを機能させるには、ウィンドウサイズ変更イベントで固定サイズまたはJavaScriptの更新マージンが必要であることを忘れないでください。

HTMLマークアップは次のとおりです。

<div class="container">
    <iframe width="400" height="400" src="http://www.youtube.com/embed/Awlp8B5os0k" frameborder="0" allowfullscreen></iframe>
</div>
于 2013-02-02T00:04:58.467 に答える