水平居中，不垂直偏移其他內容

Question

我有一個基於Flash的網站。 我想用javascript將廣告放在其頂部（與網站水平居中）。

<script type="text/javascript">
var pw_d=document;
pw_d.projectwonderful_adbox_id = "00000";
pw_d.projectwonderful_adbox_type = "0";
</script>

Flash網站全部位於1個Flash容器中。 我打算在Flash網站中保留視覺上的空白，以使廣告懸停在上方。

我不知道執行此操作所需的html或javascript。 仍在搜索中，這似乎有點普遍。

我假設我將使用div

參考站點：

http://www.charbythevampirate.com/shell.html?page=comics&comic=24

Answer 1

這是我嘲笑的快速內容。

http://jsfiddle.net/meNVU/

基本上，您想將圖像完全放在CSS中，然后將top和left屬性都設置為50％。 之后，將margin-left和margin-top設置為寬度* -1的一半和高度* -1的一半。 然后，只需將嵌入Flash的<object>上的z-index設置為0，將圖像的z-index為1。這應該（並且確實）使您步入正確的軌道。

Answer 2

將腳本包裝在div

<div style="width:auto;margin 0 auto;padding-bottom: 10px">
<script type="text/javascript">
var pw_d=document;
pw_d.projectwonderful_adbox_id = "00000";
pw_d.projectwonderful_adbox_type = "0";
</script>
</div>

padding-bottom: 10px; 會在Flash的其余部分之前在添加項下方保留一些空間，或者可以將其取出或增加像素數。

Answer 3

Matt McDonald的示例： https : //stackoverflow.com/users/342129/matt-mcdonald

http://jsfiddle.net/meNVU/

*我的最終代碼

shell.css

body {background-color: #000000;}

div#ad
{
    width: 728px;
    height: 90px;
    background-color: #000000;
    margin-left: -365px;
    margin-top: 77px;
    position: absolute;
    left: 50%;
    z-index: 1;   
}

shell.html（對於瀏覽器滾動條，它需要將我的Flash對象包裝在javascript中，以便通過Flash調整大小）

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Charby The Vampirate</title>

<link rel="stylesheet" 
type="text/css" href="shell.css" />


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">

var myQueryString=document.location.search;
if (myQueryString[0]='?')
     {
        myQueryString=myQueryString.substr(1, myQueryString.length-1);
     }
var flashvars = { 
    dat: escape(myQueryString)
};
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
if(is_chrome == true){
    var params = {
      allowFullScreen: "true", 
      menu: "false", 
      wmode: "transparent" 
    };
}else{
    var params = {
      allowFullScreen: "true", 
      menu: "false", 
      wmode: "window" 
    };

}
var attributes = {
  id: "resized", 
  name: "resized", 
  wmode: "window" 
};

swfobject.embedSWF("shell.swf", "resized", "100%", "100%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>



<div id="ad">
    <!-- Beginning of Project Wonderful ad code: -->
    <!-- Ad box ID: 38564 -->
    <script type="text/javascript">
    <!--
    var pw_d=document;
    pw_d.projectwonderful_adbox_id = "43066";
    pw_d.projectwonderful_adbox_type = "5";
    //-->
    </script>
    <script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script>
    <!-- Ending of Project Wonderful ad code: -->
</div>

</head>

<body>
<div id="resized" align="center"></div>
</body>
<script>
function ResizeFlash(newHeight){

    $("#resized").css("height",newHeight);
}
</script>
</html>

水平居中，不垂直偏移其他內容

問題描述

3 個解決方案

解決方案1
1 已采納

解決方案2
0 2011-02-10 22:02:31

解決方案3
0 2011-02-10 22:52:09

水平居中，不垂直偏移其他內容

問題描述

3 個解決方案

解決方案1 1 已采納

解決方案2 0 2011-02-10 22:02:31

解決方案3 0 2011-02-10 22:52:09

解決方案1
1 已采納

解決方案2
0 2011-02-10 22:02:31

解決方案3
0 2011-02-10 22:52:09